CODEWITHSUNDEEP
cssgwtgquery
quarks
quarks

Reputation: 35276

"Sticky" panel on a Gwt application

I have a GWT app that have a HorizontalPanel that span across the width of the page, that serves as the "top bar" of the app. However I want to make it "sticky" that is when the page content grows, and when scrollbar appears, when scrolled I want the said HorizontalPanel to stick on top. Is it possible to do with GWT and/or with the help of GQuery?

Upvotes: 0

Views: 601

Answers (2)

helios
helios

Reputation: 13841

You can use DockLayoutPanel to divide page. Put your bar on g:north and an scroll panel on g:center. That way if content inside the scroll panel overflow, the scrollbars will appear only on the "content" part.

<g:DocLayoutPanel unit="PX">
    <g:north size="40"> <!-- you must provide a fixed size, you can change it later -->
       your bar content
    </g:north> 
    <g:center>
      <g:ScrollPanel> <!-- it will be stretched to ocuppy all available space -->
         here goes your content
      </g:ScrollPanel>
    </g:center>
</g:DocLayoutPanel>

Upvotes: 1

jdramaix
jdramaix

Reputation: 1104

By using CSS:

Add/set a css class to your HorizontalPanel

myHorizontalPanel.setStyleName("onTop");

In you css file:

.onTop{
  position: fixed;
  top: 0px;
  left: 0px;
  /* adapt width and heigth to fit your needs */
  width:100%;
  height:40px;
}

That should do the trick

Upvotes: 1

Related Questions