Label Visibility

I setup a HorizontalLayout with stuff on it. One thing I add is a label which initially has nothing in it (but not invisible).


salutationLabel.setStyleName("salutation");
salutationLabel.setWidth("100%");
header.addComponent(salutationLabel);
header.setComponentAlignment(salutationLabel, Alignment.MIDDLE_LEFT);

Later on, I try to set the value of the label and have it display the text.


this.salutationLabel.setValue(salutation);
this.salutationLabel.setVisible(true);

The label is never made visible. The parent div in the html appears to be set to visibility=hidden.

How can I make this label show its contents?

Thanks

Well, Labels certainly should work as we all have lots of them. Are you sure your HorizontalLayout or other parent isn’t disabled or not visible?

Yes. Absolutely Sure. All the other components on the HorzontalLayout are visible. I’m really quite flumixed. Even if I place a placeholder text in the label from the start and don’t update the text later on, the label is still hidden.

Clearly I am doing something stupid here… and I would guess in the css, but I don’t see anything.

<div class="v-slot v-align-middle" style="width: 0px; visibility: hidden;" aria-hidden="true">
  <div class="v-label v-widget v-has-width" style="width: 100%;">Placeholder</div>
</div>

But I notice, if when I first define the label, if I set the size to 100px instead of 100%, it will be visible later on. It will not let me change the width later on and seems to always be 100px.

Can anyone help teach me what I’ve done wrong here?

You are setting the style to “salutation”. Did you have a look at the corresponding CSS?

Yes. I wrote that CSS. But even if I remove the setStyle line, it still remains hidden.

I don’t really understand this, but if I setWidth(null) everything appears to work as expected.

Probably your HorizontalLayout had a width that was incompatible with width 100% for a contained component and/or you didn’t define an expand ratio for the label you wanted to fill up space. If your horizontal layout had undefined width, 100% for a contained component does not really mean anything.

You can try the Analyze Layouts (AL) button in the debug console (add ?debug to your URL) to see if it reports problems with the 100% width for the label.