Side by side layout issue with Multi drop-down field

Question

Hello All, 
 
 Here I found one weird behavior with SidebySideLayout() component: 
 Scenario: I Created UI with more than one multi drop-down fields in sideBySideLayout(), 
 If user supposes to select a bunch of values from drop-down filed.sideBySideItem()--> component expanding based on the user selected values. This case will happen when we configure the width for SidebySideItem() . The following picture shows the behavior if we configure the width, in Other cases, it works well. 
 I'm suspecting that technically it might be the component issue? 
 Any suggestions or answers are appreciated!!!

Best, 
 Rama

deviratnamv · Answer

Hi Ramakrishna, 
 
I agree with above practitioners. Below code may be useful to you. 
 
a!sideBySideLayout( 
 items: { 
 a!sideBySideItem( 
 item: a!multipleDropdownField( 
 label: "data1", 
 placeholder: "select data", 
 choiceLabels: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 choiceValues: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 value: ri!testing, 
 saveInto: ri!testing 
 
 ), 
 width: "1X" 
 ), 
 a!sideBySideItem( 
 item: a!multipleDropdownField( 
 label: "data2", 
 placeholder: "select data", 
 choiceLabels: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 choiceValues: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 value: ri!drop2, 
 saveInto: ri!drop2 
 ), 
 width: "1X" 
 ), 
 a!sideBySideItem( 
 item: a!multipleDropdownField( 
 label: "data3", 
 placeholder: "select data", 
 choiceLabels: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 choiceValues: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 value: ri!drop3, 
 saveInto: ri!drop3 
 ), 
 width: "1X" 
 ), 
 a!sideBySideItem( 
 item: a!multipleDropdownField( 
 label: "data4", 
 placeholder: "select data", 
 choiceLabels: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 choiceValues: {"a","b","c","d","a1","b1","c1","d1","a3","b3","c3","d3"}, 
 value: ri!drop3, 
 saveInto: ri!drop3 
 ), 
 width: "1X" 
 ) 
 
 } 
)