How do I make my panels extend the full width across the page and not just to where their components stop?
As also cfrick suggested, use setSizeFull(), if your component is nested inside other layouts/components, you need to set all of them to full size as follows.
VerticalLayout panelWrapper = new VerticalLayout();
Panel yourPanel = new Panel();
panelWrapper.addComponent(yourPanel);
yourPanel.setSizeFull();
panelWrapper.setSizeFull();
If you have more parent components, you need to setSizeFull() all of them back to the UI root.
Related
This is the code I have for Grid filtering components:
headerRow.getCell(idColumn).setComponent(FilterUtils.createIdFilterHeader(dataViewFilter::setId, "user.id"));
headerRow.getCell(nameColumn).setComponent(FilterUtils.createNameFilterHeader(dataViewFilter::setName, "user.first.name"));
VerticalLayout referrerFilterVerticalLayout = new VerticalLayout();
referrerFilterVerticalLayout.setMargin(false);
referrerFilterVerticalLayout.setPadding(false);
referrerFilterVerticalLayout.setSpacing(false);
referrerFilterVerticalLayout.add(FilterUtils.createIdFilterHeader(dataViewFilter::setReferrerId, "referrer.id"));
referrerFilterVerticalLayout.add(FilterUtils.createNameFilterHeader(dataViewFilter::setReferrerName, "referrer.first.name"));
headerRow.getCell(referredByColumn).setComponent(referrerFilterVerticalLayout);
Right now the header looks like:
I need to adjust the first two components and move them up to get something like this:
Please show how to achieve this.
Probably the easiest thing would be to stick your filter boxes in two Horizontal Layouts, within the Vertical Layout.
I have MainLayout defined (extended from AppLayout), where I have configured Header and Drawer. Also, I have 3 different views which use MainLayout via #Route annotation.
There is some similarity between such 3 views - they have the common tabs at the top of the content area. Is it possible somehow to add such tabs into MainLayout content area? Or inside of AppLayout I may only add something to Header and Drawer only? How to properly implement such common tabs for these 3 views ? Right now I added duplicates of these tabs into each of the view and they don't work as expected(incorrect highlighting of selected tab). How to make them common for 3 views ?
I created one more layout class with #ParentLayout(MainLayout.class) annotation and derived from VerticalLayout implements RouterLayout. Inside this layout I added my tabs. Now, for each of the mentioned in the question views, I use this new Layout.
For part of our UI, the main div is disabled and then more components are added based on the data loaded. However, if the main div is disabled before adding the additional components, then only some of the additional components added have the disabled attribute set.
Have tried Vaadin 23.0.10 and 23.1.0rc1 with Java 17.
Example code:
VerticalLayout vlMain = new VerticalLayout();
vlMain.setSizeFull();
HorizontalLayout hlOne = new HorizontalLayout(FontAwesome.Solid.BUG.create(), new Button("Testing"));
HorizontalLayout hlTwo = new HorizontalLayout();
hlOne.setEnabled(false);
hlTwo.setEnabled(false);
Button add = new Button("Add");
add.addClickListener(buttonClickEvent -> {
if(buttonClickEvent.isFromClient())
{
hlTwo.add(FontAwesome.Solid.BUG.create());
hlTwo.add(new Button("Testing"));
}
});
vlMain.add(hlOne, hlTwo, add);
When the above is run, hlOne contains 2 disabled controls.
Clicking the button adds the additional components, however the icon doesn't inherit the disabled attribute but the button does. Calling hlTwo.setEnabled(false) again then sets everything correctly. This can be verified using the browser inspector.
While there is the workaround, it would be good to know what the expected behaviour should be.
Thanks.
This is using the Vaadin starter project Hello World example. In essence I want to have the scrollbar in the VerticalLayout on the left rather than on the whole page as shown in the image below:
However no matter what I do the scrollbar always appears on the right side. I suspect this may have to do with the AppLayout but I'm not sure how to adjust it so that the scrollbar is on the VerticalLayout shown in the diagram below.
The code is as follows:
add(getHelloVerticalLayout(), new HorizontalLayout(new Button("Simple")));
Where getHelloVerticalLayout() consists of just a bunch of Hello buttons so that it's large enough to generate a scrollbar on the webpage.
private VerticalLayout getHelloVerticalLayout() {
List<Button> buttons = new ArrayList<>();
for(int x=0; x<=50; x++)
buttons.add(new Button("Hello"));
return new VerticalLayout(buttons.toArray(Button[]::new));
}
You can wrap your layout, which needs a scrollbar, with the Scroller component. See the official docs for more information and example https://vaadin.com/docs/latest/ds/components/scroller
I have a Label and a Progess Indicator in my Vaadin indicator. It is dynamically made visible in the UI. There is a Tree below this Progress Indicator.
When the program dynamically sets the visibility of the Progress Indicator to true, the tree shifts down and the UI shakes due to the shifting.
Is there any way to make a Vaadin component occupy it's space, even if it is invisible and hence, when made visible it must not try to borrow space from other UI components?
What I am looking for is a feature similar to setRendered(true) in flex and actionscript programming.
Thanks for your help.
Finally I got an answer to my question. I just replaced the invisible components with a dummy visible label with no text.
And used it alternatively to switch between visible and invisible.
I asked the question in the Vaadin forum, and here's the response I got, from Kim Leppanen:
With Vaadin 7, if you set a component's visibility to false, then the component's information is not sent to the browser at all - it is just as if the component wouldn't exist in the layout at all.
I can quickly come up with two solutions. If you know the size of the component whose visibility you want to toggle, then you can use placeholder components - such as a Label. Put a label with the correct size in the place where you want the component. When you want to set a component as visible, then replace the label with the actual component.
The second option is to use css. Apply the css attribute "visibility: hidden" for the component you want to hide. Note that the component is not "truly" hidden. Let's say that it is a button. A user could still inspect the DOM tree and see the button in the code, change the visibility of the component on the client side (eg using developer tools or firebug) and then see and use the button as if it would be visible in the layout.
I am putting it here because people might add some more useful answers there. For a detailed explanation please see this.
Use this following example to the component you want set invisible but keeping its occupied space:
Image home = new Image();
home.setSource(HOME);
home.addStyleName("visibility: hidden");
OR
home.addStyleName("visibility: collapse");