HL contents goes beyind the size of the parent in mobile → Vertical view as shown below
If I set the overflow:hidden it truncates the combo box. As the values inside it are simple two letters. I do not want the combobox truncated.
This looks ok in Horizontal view
.I tried to set the HL to width:100% but no luck. How to have this with in the size of the parent ?
I think instead of HorizontalLayout you should use LumoUtility with Div.
The simplest example is here. The following will create a Div that is CSS Flex layout (HorizontalLayout is actually a CSS Flex layout too with Row direction). But as you want the direction to change on screenwidth, this works better. This Div is now by default vertical, but if the screen is wider than 640 pixels, it will be horizontal instead. I have added very small gap between components and small outer padding as well. Just for example, so that it is easier for you to play with the utilities.
Div div = new Div();
div.addClassNames(LumoUtility.Display.FLEX,
LumoUtility.FlexDirection.COLUMN,
LumoUtility.FlexDirection.Breakpoint.Small.ROW,
LumoUtility.FlexWrap.WRAP, LumoUtility.Gap.XSMALL,
LumoUtility.Padding.SMALL);
@psrinivasababu Can you maybe give some additional details, e.g. some code and css that you are using here?
Sure. This is the code for HL
Components.horizontalLayout() .spacing() .fullWidth() .addAndExpand(weight, 1) .add(weightType) .build()
And this is what I see DEV tools
I thought the HL auto adjusts as per the parent layout size so I was using it.
If you just want the fields to shrink to fit, rather than wrap to multiple lines, you need to configure their widths, min-widths, etc, approrpriately.
The HL does scale to fit its parent, but its contents do not, by default.
It looks like you’re not setting any widths or min-widths or anything on those fields, so they just use whatever is their defaults. I would suggest setting an appropriate min-width on the combobox (e.g. 3em or so), so that it can squash into a smaller space.
