ComboBox won't fit long text [ValoTheme]

Flow
1

Hey there

I currently changed my theme from Reindeer to Valo.
Now i’m having troubles with the ComboBox, if the text is too long.

In Reindeer the ComboBox automatically changed the width to fit the text.
Now, using Valo, the ComboBox stays small and replaces the text that doesn’t fit with “…” (See image)

I tried to set the ComoBox width too 100% and set the ExpandRation to 1 but it doesn’t help.
The only thing that worked, was setting the width to 100px or another static value.

Is this a known bug? And does anybody knows a solution?

Thanks for helping!
22141.png
22142.png

2

Hey René,

Default width in Valo is 185px. Setting the combo’s width to 100% should work as expected.

@Override
protected void init(VaadinRequest request) {
  final VerticalLayout layout = new VerticalLayout();
  layout.setMargin(true);
  setContent(layout);

  ComboBox cb = new ComboBox();
  cb.addItem("Lorem ipsum dolor sit amet");
  cb.setWidth("100%");

  Label lbl = new Label("Testing");
  lbl.setSizeUndefined();

  HorizontalLayout hl = new HorizontalLayout(cb, lbl);
  hl.setWidth("100%");
  hl.setExpandRatio(cb, 1);

  layout.addComponents(hl);
}
3

Hi Joacim,

I have used the code above, the only change I made is that I have added a longer text and commented out the width setting of the combobox.

cb.addItem("Lorem ipsum dolor sit amett Lorem ipsum dolor sit amett"); // cb.setWidth("100%"); I have attached the screenshots with valo and with reindeer.

  • Reindeer : With reindeer if I increase the text length then the width of the combobox is increasing also
  • Valo : Fixed combobox width. It is not increasing if the with of the option text is longer.

Do you think is it possible to have the same behaviour with Valo as is was at Reindeer?

Thanks
25302.png
25303.png

4

Hey Peter,

The problem is the input’s width is calculated, and Valo overrides said value. You’d have to remove (and/or modify) the combobox style from Valo.

I haven’t tried it, but you can try this:

  1. Add this line after you import valo:
    $v-included-components: remove($v-included-components, combobox);
  2. Copy this stylesheet:
    https://github.com/vaadin/vaadin/blob/master/WebContent/VAADIN/themes/valo/components/_combobox.scss
    .
  3. Remove
    width: 100% !important;
     on line 250.
  4. Import the modified combobox stylesheet.

Perhaps there’s an easier solution, but that’s at least one option.

5

it’s not clear why you kept this behavior - its clearly a regression bug - the combo box text input should adjust its width
to the maximum value length.(like the suggestion popup does(

The user can always override to set a fix width.
I had to use NativeSelect instead for now…

Hope you’ll fix this soon

6

Is there any fix in Vaadin 8.7.2 that allows the new ComboBox to be the width of the widest item caption?

The V7 migration guide suggests the new ComboBox has a default width of 100%, yet it fixes itself to 185px in Valo, as 100% width would not help (I don’t know how wide until the items are added to it). The migration guide says, “The default width for ComboBox pop-up is now 100 % (previously undefined)” in https://vaadin.com/download/prerelease/8.0/8.0.0/8.0.0.beta1/release-notes.html

7

Still no fix in 8.12.4, this is really painful.
I’ve tried the hack from Joacim but I could not get it to solve the issue unfortunately.
Would be great to see this addressed in the next update !