How make contents as a grid in a ScrollPanel in GWT project using UIBinder


Tags: java,css,gwt,scroll,uibinder

Problem :

I've my GWT project where I have the following view of a list of movies: here

Blue boxes are CompositeWidgets inserted in a ScrollPanel. I would like to obtain a grid (4 columns) and not a line as view. I'm a beginner in CSS, so I don't know how obtain my purpose. Thanks a lot!



Solution :

Wrap your widgets with a FlowPanel, so that the structure will look like:

<g:ScrollPanel>
    <g:FlowPanel styleName="{style.canFitFourOnlyInaRow}">
       // add your blue boxes here
    </g:FlowPanel>
</g:ScrollPanel>

and define a style named canFitFourOnlyInaRow with width equal of 4 widths of your blue boxes + extra margins as needed.

<ui:style>
   .canFitFourOnlyInaRow {width: 500px;} /* 500px just for example */
</ui:style>

That will make blue box #5 to jump to the next line.

BTW, do you need vertical scroll only?


    CSS Howto..

    How to use a CSS attribute selector to target a specific height?

    How to create a separated menu with logo in between

    Show missing CSS in Google Chrome

    How to solve Firefox 2.0 cross browser issues?

    How to show “…” when there's not enough space to view all the text

    How can I apply CSS to a JPG server-side?

    How to detect a smartphone through JavaScript/CSS?

    how to make my horizontal css dock navigation to vertical

    How do I center “my” navigation bar?

    How to style Repeater item background color ontap?

    how do I properly position a button element with css?

    How to create a css file in eclipse with e(fx)clipse plug in

    How to have constants in Flex CSS files

    How to add an image toward the right of a textbox and the text not overflowing to it

    How to force Dojo TitlePane to overlap with CSS?

    how to add scrollbars to (a potentially infinite) canvas using fabric.js

    How to style dropdown menu using CSS in HTML

    how to align right hand side image on top of text on mobile screen

    Using jQuery, how to find out if CSS selector “input[type=text]” is natively supported by browser?

    How to use metro ui css sidebar and compact classes

    How to reduce the length of the paragraph by dots(…)?

    How to automaticly let HTML cut the edges based on the setted height of the image?

    How to get the sticky footer to work?

    How to fix this css error in IE7 and lower?

    How to apply css selector in ZK

    How can i edit font-size and font-family option in css file using sed?

    How to determine if width has px or %

    How to stretch background image of a table cell with CSS?

    How to give readmore for a text?

    How to use a responsive background image that centers differently in both portrait & landscape?