Hi,
This alignment of button in form footer does not work:
Form formLogin = new Form();
formLogin.setFormFieldFactory(new LoginFieldFactory());
formLogin.setItemDataSource(usuarioItem);
formLogin.setVisibleItemProperties(Arrays.asList(new String[] {"login", "senha"}));
HorizontalLayout buttonLayout = (HorizontalLayout) formLogin.getFooter();
Button okbutton = new Button("OK");
buttonLayout.addComponent(okbutton);
buttonLayout.setComponentAlignment(okbutton, Alignment.MIDDLE_RIGHT);HorizontalLayout has undefined width by default, so it shrinks to the width of the button. You have to set setWidth(“100%”) for it. This probably requires that the form has a defined width (relative or fixed).
The default footer layout in Form is actually a HorizontalLayout, so you just need to use getFooter() and cast it to set the alignment for the button.
?
...
HorizontalLayout buttonLayout = (HorizontalLayout) formLogin.getFooter();
Button okbutton = new Button("OK");
buttonLayout.addComponent(okbutton);
buttonLayout.setComponentAlignment(okbutton, Alignment.MIDDLE_RIGHT);
addComponent(formLogin);Result on Firebug:
...
<div style="overflow: hidden; [b]
width: 45px; height: 26px
[/b];" class="v-horizontallayout">
...
</div>
...
This example
seems to set the width.
Button commit = new Button("OK");
form.getFooter().setWidth("100%");
form.getFooter().addComponent(commit);
((HorizontalLayout)form.getFooter())
.setComponentAlignment(commit, Alignment.TOP_RIGHT);
You shouldn’t be worried about the seemingly fixed sizes that you may observe in FireBug. Many Vaadin layout components, such as HorizontalLayout, calculate widths dynamically in JavaScript on the client-side and set the height and widhts in the HTML DOM. That happens also with relatively sized layouts and layouts with undefined size.
Ok, I am from Brazil. My inglish is bad. Sorry.
Its work for me:
form.getFooter().setWidth("100%");Tanks!
Other question:
Why the table of the Form have 100% by default in the input types?
Firebug:
<table cellspacing="0" cellpadding="0" class="v-formlayout-margin-top v-formlayout-margin-bottom v-formlayout-spacing">
...
<td [b]
width="100%"
[/b] class="v-formlayout-contentcell"><input type="password" class="v-textfield" style="width: 22px;"></td>
...
</table>The Form are not in the center and the right alingment because the fields have width 100%
Is possible change the vaule of this width td?
That’s because form has 100% width within it’s containing layout by default. You should set a fixed width for the Form to make it less wide. “form.setWidth(“400px”)”, for example.
You can’t set an undefined width for the form to make it shrink as small as possible, because you have now set the footer layout to 100% width - that would lead to a paradox. That’s actually possible to solve by putting the button
outside
the Form into a VerticalLayout and setting undefined width for the form, it’s layout, and for the containing VerticalLayout. In that case, the VerticalLayout gets its width from the form, and the external “footer” can use that width as a reference for 100% width. Did this get complex? 
This example
demonstrates that technique a bit.
The 100% width for the comes from rather complex logic and it’s not possible to set it directly.
While Firebug is great for the purpose of building themes, you shouldn’t think of the HTML structure too much. Vaadin has complex logic for building the structure and calculating various sizes and it’s not possible to tune every detail in HTML from the API. You shouldn’t really even need to know about HTML when coding with Vaadin, so unless making custom themes with CSS, forget the HTML and concentrate on learning the API.
Ok, I set
form.setWidth(“400px”)
for work. Tanks!
The problem is Vaadin set size for very objects html automatically.
Maybe a possible solution could be the user (programmer) to set this paramethers (as needed).