How to center Label in VerticalLayout?

Vaadin 6 / 7 / 8 Framework UI
1

Hi! How to center Label in VerticalLayout?

VerticalLayout verticalLayout = new VerticalLayout();

Label labelTitulo = new Label("Teste");

verticalLayout.setWidth("750px");
verticalLayout.addComponent(labelTitulo);
verticalLayout.setComponentAlignment(labelTitulo,  Alignment.MIDDLE_CENTER);

I don´t set the label size.

In Firebug:

<div style="overflow: hidden; width: 750px; height: 18px;" class="v-verticallayout">
 <div style="overflow: hidden; margin: 0px; width: 750px; height: 18px;">
  <div style="height: 18px; width: 750px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
   <div style="float: left; margin-left: 0px;">
    <div class="v-label" [b]
style="width: 750px;"
[/b]> Teste </div>
   </div>
  </div>
  <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
 </div>
</div>

Why the width of the label is 750px and no empty? Impossible align center with this size fixed.

2

Hi,

Label’s width is 100% by default, this means that you have to set its width to undefined by saying setWidth(null). After that it should be centered.

-Henri

3

Hi André.

I was having the same problem 3 weeks ago, but with TextFields. I used your code and added the part that Henri suggested you, but it shows the same results as yours.

Weirdly , if you change your labels to text fields, it works:


         Window main = new Window();
         setMainWindow(main);
         VerticalLayout Vertical = new VerticalLayout();
         main.addComponent(Vertical);
         TextField tf1 = new TextField("TF1");
         TextField tf2 = new TextField("TF2");
         Vertical.addComponent(tf1);
         Vertical.addComponent(tf2);
         Vertical.setComponentAlignment(tf1, Alignment.BOTTOM_LEFT);
         Vertical.setComponentAlignment(tf2, Alignment.TOP_CENTER);

It seems than labels cant be align if they are alone :wacko: There must be a way, but I dont know how.

-Sebastian

4

As Henri pointed out earlier, setting the size of the Label to undefined or fixed size, you can align them like any other component. The default width is just 100% for Labels (and they are of course centered, but by being 100% wide they stretch from side to side).

5

[quote=
Jouni Koivuviita]
As Henri pointed out earlier, setting the size of the Label to undefined or fixed size, you can align them like any other component. The default width is just 100% for Labels (and they are of course centered, but by being 100% wide they stretch from side to side).

[/quote]

Yes, you’re right! It works.

My mistake André.

6

Hello and sorry for hijacking an old thread, but this topic is exactly describing, what I need :slight_smile:
well, to be more precise, a combination of this topic and this one:
http://vaadin.com/forum/-/message_boards/message/93369#_19_message_93112

What I’m trying to achieve, is having a Label that would center in its containing VerticalLayout and would be able to wrap, if the text width won’t fit into single line.
Is it possible? AFAIK, to center a label, it must have an undefined size (otherwise it stretches to 100% and even though the label itself is centered, the text in the label isn’t). On the other hand, the label cannot have undefined size, if I want it to wrap the text. Kind of catch-22 :smiley:
is there any solution to this? :slight_smile:

7

This should be doable. You could just try adding a stylename to the the undefined wide label, and override the white-space:nowrap property with CSS (or just use the .v-label-undef-width selector that is added to all labels with undefined width).

The problems start when the containing layout should be able to grow vertically depending on the content of the label (IIRC), but if the size of the label is undefined, some crazy things happen.