Select input component inside stylebox changes width behavior of text component

[mikey]

in the screenshot, below, i have two select input components. in each, the width of the text component (the label) is the same.
i didn’t change any other settings on either.
before i put the bottom component in a stylebox, everything lines up but, if i create a flexbox (zero margins and indents), i get the photo below.
notice that the label widths are now different, and the input regions are no longer aligned.

[Fadwa]

Hello Mikey!

That’s because the second component that you put inside the flexbox’s width will vary depending on the flex-direction.

You can, either change the flex direction of the stylebox to column, so that the second component’s width is extended vertically with its parent, or set the child’s width to 100%.

-Setting the stylebox flex direction to vertical:

or
-Setting the second text input to 100%:

[mikey]

there was only one component in the stylebox. i had not even gotten to adding other components, because of this issue.
so, please walk me through this: i originally put a flexbox in place so i could put a button on the same row with the input field. if i set the flexbox to vertical, then the button does not appear on the same row. so, do i need to put the input field in a flexbox and set it to vertical, and then have an enclosing flexbox for that flexbox, plus the button, and set that to horizontal?

[Fadwa]

If you do not want to change the flex direction to vertical, then all you can do is give 100% to your text input’s width

[mikey]

what i want is:

• text input, label and input area the same size as the element above it
• button to the right of the text input
  in this example, i would have gross weight, and the button (probably, more likely, a select input component) for the unit of measure

[JPR]

Can you make a drawing of what you need exactly? A picture is worth a thousand words…

[mikey]

using some other tool to lay this out:

SO:

• labels are aligned
• input areas are aligned
• component (button/menu/etc.) horizontally in line with one of the components

the first two are obvious, but once we add the flexbox so we can add the other component, we run into this issue.

maybe the ultimate solution is back to my original request that the matrix component be able to be used for more than just entity edits, and the rows/columns don’t have to all be the same - sort of a flexbox that works in both x and y, at the same time.

[JPR]

(1) is a stylebox flex row 1000px wide H-Center
(4) is a Text input width 80%
(2) is the label width 40%
(3) is the input width 60%
(5) is the button width 20%

The you can duplicate the whole stylebox for the next line. I would use a stylebox into which I will put all the (1) styleboxes.
Tell me if it works for you please.

[mikey]

no bueno un poquito bueno (“a little” bueno)
there are two different issues in play, here:

1. (original issue) throwing a text input component in a flexbox (even one that has 0 internal and external margins changes) the way that the elements inside of the text input component flexbox (the label and the input field) size and position (see first post). this feels like a bug.
2. (what you and i are talking about - making this work): the flexbox for the input/button isn’t the problem. the problem is getting the label and the input field to align with the labels/fields on the other lines. using percentages does not work, because the text input component is a different size than it is on a line that does not contain a button.
   the only way that i can think of to make this alignment work, in Q, is to nest as follows:

• an outer flexbox for each line
• two flexboxes inside of that one, one for the text input component, and another for either a button or a blank space. each of those two inner flexboxes will be fixed size.
  the problem with this approach is that it limits the size of the input fields on lines that don’t have a button on the end.

[edit] here is what the workaround looks like. each line is a flexbox. the text input components are sized based on a percentage. notice that making the alignment work forces the quantity field to be narrower than the box.

[mikey]

Now let’s make this messier:

• change the width of the input area for Quantity to 75
• add padding to the flexbox for Gross Weight and Gross Wt. UM (the select input component).
  Now, the horizontal placement of the sub-components of Quantity are a problem and the vertical alignment in the flexbox for Gross Weight flexbox is broken. i think this latter issue is because there is a built-in padding or margin in a text input component that is not shown in the properties (even when all the padding and margins are zero, there is still some padding).

[Fadwa]

Hello Mikey!

You can try playing around with styleboxes and the percentage width in order to arrange and get exactly what you visually want.

For example, in the example above, I included the first component in a stylebox having as width 50%, then in the second style blox below with the row flex display, I added two styleBoxes with 50% each, with both text inputs having as minimal width of the label 30% for example, to look equal…

[mikey]

Hello Fadwa!
I know that I can force it, but this started as a bit of a bug report, and as it has progressed, it’s become more of a bug/huh report (the post just above the reply you made shows that there seems to be some weird vertical issue, too.