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 can i use ng-class variable from controller?

    How to make a CSS border for a dropdown menu?

    How to create inheritance with LESS?

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    how do i include css based on screen size of the device

    CSS Web fonts how to use it with use of @font-face its not working

    How to add a broccoli plugin to ember-cli app with live-reload?

    How to position a scroll box on top of an image using only inline CSS

    how to add empty space between cells in tables?

    Show X and Y coordinates?

    How to run/debug Web Application project without cache/cookies?

    How to stretch div height to fill parent div - CSS

    How to change the focus state in CSS to just affect the keyboard and not mouse clicks

    A plugin or tool to show what elements on a page are effecting other elements?

    How to add stylesheet to toolbar

    how to make a stretchable blog header

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    css3 : how to make div go up to bottom of page?

    How to keep floated element from affecting “text-align: center” text?

    How to prevent slider from stretching?

    IE11 dosen't show CSS-Content properly

    How to make an entire square div clickable with CSS?

    How to fixed image on every screen resolution?

    How can i refer to all of my tags in CSS?

    How to add hover text on D3 disign?

    How to prevent adding CSS 'class' properties

    How to change CSS in media tag within @media only tags with jquery?

    how to configure .htc files to work on nginx

    How to style radio button or checkbox inside a bootstrap table?

    jQuery: How do I target the clicked element when they all share the same CSS class?