Move buttons to the bottom for the TextareaInput component

rdmorganiser · Jan 31, 2025 · bb8c9c7 · bb8c9c7
1 parent ee4b281
commit bb8c9c7
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 11 deletions.
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -39,7 +39,7 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
   return (
     <div className="interview-widgets">
       <div className="interview-widget">
-        <div className="interview-input">
+        <div className="interview-input checkbox-input">
           <div className="buttons-wrapper">
             <div className="checkbox-control">
               {

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
@@ -52,7 +52,7 @@ const DateInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input date-input">
       <div className="buttons-wrapper">
         {buttons}
         <DatePicker

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
@@ -17,7 +17,7 @@ const FileInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input file-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className="file-control">

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
@@ -44,7 +44,7 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input radio-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -18,6 +18,7 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   const classnames = classNames({
     'interview-input': true,
+    'range-input': true,
     'range': true,
     'default': isDefaultValue(question, value)
   })

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
@@ -105,7 +105,7 @@ const SelectInput = ({ question, value, options, disabled, creatable, updateValu
   }
 
   return (
-    <div className="interview-input">
+    <div className="interview-input select-input">
       {
         creatable ? (
           isAsync ? (

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -33,7 +33,7 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input text-input">
       <div className="buttons-wrapper">
         {buttons}
         <input

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
@@ -26,9 +26,8 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input textarea-input">
       <div className="buttons-wrapper">
-        {buttons}
         <textarea
           ref={ref}
           rows={6}
@@ -40,6 +39,7 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
             handleChange(value, event.target.value)
           }}
         />
+        {buttons}
       </div>
       <Unit unit={question.unit} />
     </div>

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
@@ -22,7 +22,7 @@ const YesNoInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input yesno-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>

diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
@@ -165,15 +165,25 @@
         }
     }
 
-    &:has(.react-select) {
+    &.select-input {
         .buttons {
+            // in a select widget, additional space is reserved for the dropdown icon
             position: absolute;
             right: 62px;
             margin-top: 2px;
             margin-bottom: 2px;
         }
     }
 
+    &.textarea-input {
+        .buttons {
+            // in a textarea widget, the buttons are positioned at the bottom
+            top: auto;
+            height: 32px;
+            bottom: 0;
+        }
+    }
+
     .buttons {
         display: flex;
         gap: 10px;
@@ -228,7 +238,7 @@
     }
 
     input[type="text"] {
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
     }
 
     .radio,