I have a Vaadin 8 application with several views.
public class ViewName extends Panel implements View {
There is a VerticalLayout as main layout in the panel.
public ViewName() {
setSizeFull();
VerticalLayout mainLayout = new VerticalLayout();
setContent(mainLayout);
Then I have many different layouts (HorizontalLayout, GridLayout) or Components such as Label being added as components to the mainLayout. For the HorizontalLayouts I often do the following to use the full width of the screen:
hLayout.setWidth("100%");
I have a lot of icons, grids etc. Everything is OK as long as I don't resize the window.
When I resize the window to a small size I get a mess (icons, text etc. on top of each other) and no horizontal scrollbar. (However, the grids get horizontal scrollbars.) I have tried many things to fix this. If I add
mainLayout.setSizeFull();
or
mainLayout.setWidth("100%");
I have a mess on the big screen already. I also tried the CSS for the mainLayout as described here. I get several scrollbars but none for the window itself!
The only component that resizes correctly is a Label added to the mainLayout, e.g.:
Label title = new Label("Some text",ContentMode.HTML);
title.setWidth(100, Unit.PERCENTAGE);
mainLayout.addComponent(title);
mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);
I also noticed that anything in a GridLayout seems to stay in place after resizing but is not vissible since I have no scrollbar. However, icons in a HorizontalLayout get on top of each other.
What is wrong? Please, I need a general instruction on which layout I should use as main layout for my view panel, how to size the components and how to get ONE horizontal scrollbar for the main window if necessary.
The problem is that you are setting the width of your mainLayout to the width of your view. This means, that your mainLayouts width will never be bigger than your views width. So no scroll bar will appear.
According to the information you posted, changing your mainLayouts width to undefined should fix the problem.
mainLayout.setWidth("-1px");
Related
I'm trying to build a screen where there is a fixed widget at the top of the screen and another widget which is fixed to the bottom of the screen and in between is a scrollable widget.
I want to have the content inside the scrollable widget scroll underneath the two fixed widgets (both with a transparent blur), to indicate that there is more content underneath.
Here is an image of what I am trying to do.
I am currently using a Stack for this, however I am having to manually adjust the padding in the SingleChildScrollView to offset for the top and bottom widgets, but I would like to have this be much more flexible and have the widgets be any size and not have to update the padding.
I've found other examples where the bottom widget is part of the scrollable content but that isn't quite what I am looking for.
Does anyone know of a way to do this, without having to manually provide the padding?
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
I'm currently testing the integration of some JavaFX2 components in to a swing application.
I have a JFXPanel which contains an HBox Pane which holds a list of buttons. What I'm trying to achive is to hide and show some buttons and resize the HBox and the JFXPanel. Problems I'm facing:
When a hide some buttons, the HBox does not resize itself.
I can modify HBox size (using resize method) but I must specify the
dimensions (no automatic resize) the underlying JFXPanel does not
resize. The autosize method does not seem to acomplish this either.
So, How can I resize it ? I'm using FXML and controllers so I see no easy way of resizing the JFXPanel but I'm trying to see how can I manually set it, but how can this be done automatically ?
By the way, I'm not using absolute positioning in swing (no layout manager).
Try to remove the button from the HBox, not just hide it.
I have done the same with a ToolBar & it update its size when buttons are added or removed.
I have a UIScrollView (managed by a view controller) which I am using both full screen and as a subview. The full screen version works fine - the subview does not.
The subview is positioned so that it takes up about the bottom half of the screen, with a small - 20 pixels or so - margin at the bottom.
Initially it displays in the correct position but overwrites the bottom margin - even though the scrollview's frame is set to leave the margin.
When I scroll the view up by dragging it, the whole view moves upwards and obscures the top of the window. The frame stops moving when it hits the navigation bar at the top and starts scrolling like a normal scrollview. If I scroll it enough it eventually reveals the margin at the bottom of the screen.
I am at a loss to know what to do - I've tried every spring combination I can think of. I'm now looking at subview clipping.
Images below. The first shows the scrollview on initial page load, positioned correctly aside from lower margin overwrite. The scroll view has a white background.
The second image shows it scrolled up toward the top:
The third image shows it scrolled all the way up to the top - note that the lower margin has become visible.
I'm not 100% sure on this one, but worthy the shot: my guess is you're likely not setting the Bounds property correctly on your table.
To solve this issue, the easiest way would be to set myscrollview.clipsToBounds = true.
Something is definitely wrong here. I think what happens is that you are adding the same instance of scrollview as a subview on itself. So basically what you are left with, is one instance alone. Anything you add to the "subview", is basically added on the superview, since it is the same object.
For example, this is what I think you are doing in the view controller:
//...
private UIScrollView myScrollView;
public override void ViewDidLoad()
{
this.myScrollView = new UIScrollView();
this.View = this.myScrollView;
this.View.AddSubview(this.mySrcollView); // same instance
this.myScrollView.AddSubview(aUIButton); // "aUIButton" will be added in View also, since it is the same object
}
If this is the case, it is wrong. I suggest not changing the controller's view at all. If you want to have a controller that has a fullscreen UIScrollView, just create it and add it as a subview, making sure the AutoSizesSubviews property to true.
That's my understanding at least.
There is a panel with anchor layout used for vertical sizing.
Inside the panel there is a horizontal buttongroup.
Is there a way to set fixed width or better make the width depend on buttons?
In my case it is always stretched to the size of the window.
There is the same problem with the grid inside the panel.
Thank you.
Making the width dependent on the buttons is handled by the layout itself. If you have an hbox layout, each of the items inside the container (say, buttons) will automatically occupy the width.