Scriptcase 9.7.010, PHP 7.3, development environment
I am trying to use a multi-step form that has several select2 fields. The select2 fields on the first step are sized correctly to fit the text that is in the drop-down, however select2 fields on the second step are not the correct width and the text is wrapped onto multiple lines for each value in the list. These select2 fields are using an automatic lookup.
-
If I set a specific width for the select2 on the second step, they will display at that width.
-
If I change them to select instead of select2, they will display at the correct width automatically.
-
If I switch the multi-step form to use ‘tabs’ instead of ‘steps’ then the select2 fields on the second tab display at the correct width automatically.
-
If I select a value from the list that is wider than the current width of the select2 box, then the select2 box will resize to the width of the selected item.
It appears the select2 type is auto-sizing to the selected value when used after the first step of a multi-step form, instead of to the widest item on the list. A select form in the same place, or a select2 used in a tabbed form or a select2 on the first step of a multi-step form is automatically sized to the width of the widest item in the list.
I can duplicate this in a new form as follows: I placed a select2 on the second step of a multi-step form and created an automatic lookup that resulted in a list of values where each row is at least a few characters long. I then selected “Use Title” and set the title to a single character (in this example, the title is just the letter “A”). The result looks like this:
The field is only as wide as the selected item, in this case the single character “A” which was set as the title.
Once I make a selection, the box resizes and I get this:
If I make this field a regular select instead of select2, I get this:
The field was already as wide as the widest item before I clicked on it to open the drop-down.
If I put it back to select2 but move it to the first step of the multi-part form, I get this:
The field was already as wide as the widest item before I clicked on it to open the drop-down. That is what I expect it to look like in the first example when it was used in the second step of the form.