diff --git a/src/bundle/Resources/public/js/scripts/admin.input.text.js b/src/bundle/Resources/public/js/scripts/admin.input.text.js index 95b14b7b09..296fb5425c 100644 --- a/src/bundle/Resources/public/js/scripts/admin.input.text.js +++ b/src/bundle/Resources/public/js/scripts/admin.input.text.js @@ -1,6 +1,6 @@ (function (global, doc) { const INPUT_PADDING = 12; - const TEXTAREA_SCROLLBAR_PADDING = 6; + const EXTRA_SPACING = 6; const togglePasswordVisibility = (event) => { const passwordTogglerBtn = event.currentTarget; const passwordShowIcon = passwordTogglerBtn.querySelector('.ibexa-input-text-wrapper__password-show'); @@ -47,12 +47,17 @@ const textWrapper = inputActionsContainer.closest('.ibexa-input-text-wrapper'); const inputType = textWrapper.classList.contains('ibexa-input-text-wrapper--multiline') ? 'textarea' : 'input'; const input = textWrapper.querySelector(inputType); + const { width: actionsWidth } = inputActionsContainer.getBoundingClientRect(); - if (!input || input.type === 'number') { + if (!input) { return; } - const { width: actionsWidth } = inputActionsContainer.getBoundingClientRect(); + if (input.type === 'number') { + input.style.paddingRight = input.value ? `${actionsWidth + EXTRA_SPACING}px` : `${INPUT_PADDING}px`; + + return; + } input.style.paddingRight = `${actionsWidth + INPUT_PADDING}px`; }; @@ -90,7 +95,7 @@ const scrollbarWidth = offsetWidth - clientWidth; multilineInputWrapper.classList.toggle('ibexa-input-text-wrapper--scrollbar-visible', hasScrollbar); - multilineInputWrapper.style.setProperty('--scrollbar-width', `${scrollbarWidth + TEXTAREA_SCROLLBAR_PADDING}px`); + multilineInputWrapper.style.setProperty('--scrollbar-width', `${scrollbarWidth + EXTRA_SPACING}px`); }; doc.body.addEventListener('ibexa-inputs:added', attachListenersToAllInputs, false); diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss index 8628b70dd8..541f1c3c3b 100644 --- a/src/bundle/Resources/public/scss/_inputs.scss +++ b/src/bundle/Resources/public/scss/_inputs.scss @@ -450,12 +450,6 @@ &--type-number { max-width: calculateRem(150px); - .ibexa-input-text-wrapper { - &__actions { - right: calculateRem(32px); - } - } - .ibexa-input--text { padding-right: calculateRem(12px); }