CODEWITHSUNDEEP
javacssgwtscrolluibinder
anto150192
anto150192

Reputation: 537

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

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!

Upvotes: 1

Views: 110

Answers (1)

alexp
alexp

Reputation: 797

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?

Upvotes: 2

Related Questions