"Sticky" panel on a Gwt application

Question

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?

I think you can add a style to the panel and do what you want with css. — grandouassou, May 08 '12 at 07:21
I don't think because GWT generates HTML and provide default CSS styles for the elements. But if you look in the doc and in the generated code you'll see most elements are just `
`. HorizontalPanel from what I remember is basically a div with a width set to 100%. So you can easily add style to make them react as you want. Of course I don't think you can make such assumption with elements like a grid because it has 'complex' behaviors. But HorizontalPanel is a simple element. — grandouassou, May 08 '12 at 08:57
HorizontalPanel generates a `` with one row if remember well... — helios, May 09 '12 at 11:12

score 1 · Accepted Answer · answered May 09 '12 at 09:39

1

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

answered May 09 '12 at 09:39

jdramaix

1,104
6
9

Good one. But you have to remember to leave enough space (40px) at the top of your content, so your bar doesn't cover it when being at the top of the scroll. `fixed` will make the bar be outside the normal flow of content. – helios May 09 '12 at 09:46
yes, sure. You have to set the margin-top of the content equals to the height of the horizontal panel – jdramaix May 09 '12 at 10:34
LOL! margin-top will do :) I didn't realize!! – helios May 09 '12 at 11:11

helios · Answer 2 · 2012-05-09T11:13:41.597

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>

"Sticky" panel on a Gwt application

2 Answers2