Using Vaadin 8 to develop simple application with horizontal menubar on top and grid in the center. I am finding it hard to get a simple Horizontal Menu bar with icon. I am using the default CRUD View example with some modification and here is the snippet below :
public MainScreen(MyUI ui) {
setSpacing(false);
setStyleName("main-screen");
setMargin(false);
setSizeFull();
addComponent(getMenu());
HorizontalLayout menuLayout = new HorizontalLayout();
menuLayout.addStyleName("valo-content");
menuLayout.setWidth("100%");
menuLayout.setSpacing(false);
HorizontalLayout viewContainer = new HorizontalLayout();
viewContainer.addStyleName("valo-content");
viewContainer.setWidth("100%");
final Navigator navigator = new Navigator(ui, viewContainer);
navigator.setErrorView(ErrorView.class);
menu = new Menu(navigator);
menu.addView(new SampleCrudView(), SampleCrudView.VIEW_NAME, SampleCrudView.VIEW_NAME, VaadinIcons.EDIT);
menu.addView(new AboutView(), AboutView.VIEW_NAME, AboutView.VIEW_NAME, VaadinIcons.INFO_CIRCLE);
navigator.addViewChangeListener(viewChangeListener);
Image image = new Image(null, new ThemeResource("img/example.jpg"));
menuLayout.addComponent(image);
menuLayout.addComponent(menu);
menuLayout.setSizeFull();
addComponent(menuLayout);
addComponent(viewContainer);
setExpandRatio(menuLayout, 1);
setSizeFull();
}
Appreciate if any one could help me understand layouts and how to fix this issue.
Here is the snapshot the below with weird spacing and layout
Related
I'm trying to display three TextField in a line horizontally, but the components will be displayed in vertical way:
this is the code:
VerticalLayout vertical = new VerticalLayout();
vertical.addComponent(new TextField("Name"));
vertical.addComponent(new TextField("Street address"));
vertical.addComponent(new TextField("Postal code"));
HorizontalLayout horizontal = new HorizontalLayout();
horizontal.addComponent(new TextField("Name"));
horizontal.addComponent(new TextField("Street address"));
horizontal.addComponent(new TextField("Postal code"));
//setWidth("670px");
//setWidth("100%");
addComponents(vertical, horizontal);
when I diplay that I see:
I've tried to increase the width to 100% try to set the width to 900px; But I'm not able to figure out what can be the issue and where to look for?
I want to align the Button on the same line as the Text Fields. The item alignment has been set to Alignment.CENTER, but as you can see from the image, the vertical centers of the TextFields are lower due to the label on top of them.
HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
Div div = new Div(buttonAddPriceRange);
horizontalLayout.add(spanneVon, spanneBis, div);
layout.setAlignItems(Alignment.BASELINE); allows you to align items by the baseline, that is with the bottom.
HorizontalLayout hl = new HorizontalLayout(new TextField("hello"),
new Button("world"));
hl.setAlignItems(Alignment.BASELINE);
add(hl);
Check out the great video Master Vaadin VerticalLayout and HorizontalLayout - layouts in Vaadin Flow to learn more.
Try ...
horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);
Vaadin 11.0.1
Layout is one top grid and to bottom grid (one on left, one on right)
Here is how I create my page:
public class InformationMainView extends VerticalLayout {
private Grid<AdmisRejet> gridRejet = new Grid<>();
private Grid<Entry<String, String>> admisPropertiesGrid = new Grid<>();
private Grid<AdmisHistory> gridJobHistory= new Grid<>();
public InformationMainView() {
// history (top)
gridJobHistory.setItems(admisHistoryRepository.findAllByOrderByJobExecutionDateDesc());
gridJobHistory.addColumn(AdmisHistory::getJobExecutionDate).setHeader("Date Importation");
gridJobHistory.addColumn(AdmisHistory::getCreatedBy).setHeader("Par");
gridJobHistory.addColumn(AdmisHistory::getUai).setHeader("UAI");
gridJobHistory.addColumn(admisHistory -> admisRejetRepository.findAdmisRejetByAdmisHistory(admisHistory).size()).setHeader("Nb Rejets");
// reject (bottom left)
gridRejet.addColumn(AdmisRejet::getTypeRejet).setHeader("Type rejet");
gridRejet.addColumn(AdmisRejet::getInformation).setHeader("Valeur");
gridRejet.addColumn(getBlockingIconRenderer()).setHeader("Bloquant");
// details (bottom right)
admisPropertiesGrid.addColumn(Entry::getKey).setHeader("Clé");
admisPropertiesGrid.addColumn(Entry::getValue).setHeader("Valeur");
add(gridJobHistory, new HorizontalLayout(gridRejet, admisPropertiesGrid));
The bottom are not render (not even the headers). There is no data in them (normal, because data are populated when I click on the top grid).
But I expected to see at lest column headers...
Here is the render:
I made it work by forcing the width:
HorizontalLayout bot = new HorizontalLayout();
bot.setWidth("100%");
bot.add(gridRejet, admisPropertiesGrid);
add(gridJobHistory, bot);
I already create the tab sheet. The problem is I cannot scroll the page so I can see only half of my page. So I have decided to create Panel inside the tab sheet but every time I insert the Panel source code it always error.
public PersonRegistration()
{
VerticalLayout tab = new VerticalLayout();
tab.setSizeFull();
TabSheet tabsheet = new TabSheet();
tabsheet.addStyleName("center-aligned-tabs");
addComponent(tabsheet);
VerticalLayout tab1 = new VerticalLayout();
tab1.addComponent(new PICConfirm());
tabsheet.addTab(tab1, "IC Confirmation",null);
VerticalLayout tab2 = new VerticalLayout();
tab2.addComponent(new PDemography());
tabsheet.addTab(tab2, "Demography",null);
VerticalLayout tab3 = new VerticalLayout();
tab3.addComponent(new PContact());
tabsheet.addTab(tab3, "Contact",null);
Panel panel = new Panel();
panel.setSizeFull();
panel.getContent().setSizeUndefined();
tab.addComponent(panel);
tab.setExpandRatio(panel, 1);
}
Is it okay to put panel inside the tab sheet?
Try calling simply setSizeFull(); // if you are implementing View
in that method and see if it works.
If I use following code to create a UI using Vaadin,
#Override
protected void init(VaadinRequest request) {
HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.addComponent(new Label("Why am I not shown?"));
Button button = new Button("expanding button");
horizontalLayout.addComponent(button);
horizontalLayout.setExpandRatio(button, 1);
horizontalLayout.setWidth(100, Unit.PERCENTAGE);
setContent(horizontalLayout);
}
The label I added to horizontalLayout is not shown in the created UI. Why is that? What I expect to happen in this case is the label to take its required width and the button to take the rest of the width. But the label is not shown at all.
Please don't ask me why I want to expand the button. This is just a MCVE and my real UI is somewhat more complex.
The Button has undefined size by default. So space will be shared by the 100% sized Label (by default) with expand ratio of 0 and the excess space of the Button cell with expand ratio 1. So all space is given to the excess space of the button.
Set the Label to have a undefined size with label.setSizeUndefined() and will work as you expect.
Note that relative sized components can lost all his space when using a expand ratio.
For example:
HorizontalLayout horizontalLayout = new HorizontalLayout();
Label l1 = new Label("one");
Label l2 = new Label("two");
Label l3 = new Label("three");
horizontalLayout.addComponent(l1);
horizontalLayout.addComponent(l2);
horizontalLayout.addComponent(l3);
horizontalLayout.setExpandRatio(l2, 1);
Will show only label "two".