I have the following Grid showing Java system properties:
systemPropertyGrid = new Grid<>();
systemPropertyGrid.setItems(buildSystemProperties());
systemPropertyGrid.addColumn(SystemProperty::getProperty).setHeader("Property").setFlexGrow(1);
systemPropertyGrid.addColumn(SystemProperty::getValue).setHeader("Value").setFlexGrow(5);
systemPropertyGrid.setHeight("500px");
All items are shown when I replace the setHeight by setHeightByRows(true). But as soon as I don't specify systemPropertyGrid.setHeightByRows(true) the grid has a calculated height of 2 pixels in the browser (Firefox, Edge) which is the border. However, the element style height is correctly set to 500px as I can see in Firefox developer tools.
Bug in Vaadin Flow? How is this even possible that the browser doesn't use the element style height ultimately?
Screenshot:
SSCCE using the Vaadin Flow spring starter:
my-starter-project_51443246.zip. Call maven goal springBoot:run.
You are right. It doesn't work in Firefox, while it works in Chrome. You can submit an issue in GitHub.
As a workaround, if you set the height of the parent VerticalLayout, it works in both Chrome and Firefox. So, add the following statement:
setHeight("500px");
Fixed in Vaadin Grid v5.0.5 which has been released as part of Vaadin 10.0.9 or Vaadin 11.0.4. So you need to make sure to use either of those. (which of course wasn't released at the time of the original posting)
Related
Using css !important rules to override inline styling for Google DFP injected iframes. it's been working fine for the last couple years, but since a recent iOS update, mobile safari is failing to calculate the proper width of the iframes. The iframes are set to size to 100% of the parent block (both width and height). The parent is sized correctly and the calculated value for the parent is correct. Safari's inspector shows that my width: 100% !important rule is being accepted/applied, but the calculated value for the iframe is completely different. Using responsive design mode on my desktop to preview the page shows everything working perfectly (huh?!).
I read another similar question that was answered by applying transition: none, but that's not working in my case.
I'm out of ideas and really don't want to resort to a javascript solution. Any wisdom?
Hi I am new to Sencha GXT. I would like to know, How can I style a GXT grid.
I want to know this because I am currently integrating the sencha GXT grid into a Vaadin widget. I have successfully done that but, the problem is with the styling. Is there any documentation we can prefer.
Major problem is the grid works perfectly when I manually give it a width and a height but, What want is a to fit in to DIV it is in and re size the grid when the browser resizes.
Thank you.
http://docs.sencha.com/gxt-guides/3/concepts/appearance/Appearance_3.html
Here's a link to the docs, basically it follow the GWT paradigm, if you've seen it before.
But since you want to integrate GXT Grid in a Vaadin widget I'd like to ask about your needings.
I know the standard Vaadin seems a little.."poor"..but I encourage you to check out the new Grid widget in Vaadin 7.4-beta (est release Feb.): it rocks!
I have recently built a new Vaadin widgetset for our web application. The new widgetset is based on some new addons but especially on vaadin 6.8.12.
When I deploy the ear file and start the application the right vertical scrollbar that belongs to the web browser (not a java panel or layout) is missing. The scrollbar is actually there but you are forced to drag the browser window far to the right in order to make it visible. Even though it is visible you can not scroll down as much as you need to view the lower content of the page.
This is a problem in Chrome, Firefox and Opera but for some reason Interner explorer seems to handle it just fine.
So what I want is that the browser scrollbar should be visible regardless of the size of the window.
Any ideas?
The height of a layout must be undefined for the vertical scrollbar to show up. If you set it to 100%, any content off the bottom of your browser window / tab will be hidden.
If that's not enough, please add some code to see how you made your main window layout.
In Internet Explorer 10, if you set the page to be IE8 documents mode does y-axis label appears horizontally instead of vertically?
We have controls what require us to use the IE8 mode on the page.
I've managed to get it to happen on my site and the HighCharts website too.
Is there a workaround for this?
Thanks
I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items present on the right and the bottom part of this div do not appear after scaling. If I resize the window (or change the orientation on iPad), the div scales correctly and the items begin to appear, but again disappear after a certain size.
This used to work fine with IOS 5.0 and previous chrome/safari versions. Is this a bug in latest webkit version? Also, is there any workaround to avoid this behavior?
I had got a solution for this long back but forgot to update this post. This happens because of layer compositioning done by chrome. Please add translate3d(0px, 0px, 0px); in the transform string. Adding this will create a new layer for the item and issue will be fixed. :)
Read more about layer compositioning here : http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome