Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Rich Modal Panel Header Moving with scroll

 
Astria Bothello
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a rich modal panel with style="overflow-x:auto"

When there is a horizontal scroll bar - the header (which should be fixed) also moves as you scroll to the right.

Appreciate any suggestions
modal.gif
Moving header becoz of scroll
[Thumbnail for modal.gif]
 
Tim Holloway
Saloon Keeper
Pie
Posts: 18025
47
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Rather than making the entire modal panel scroll, break it down into zones. You can use the brute-force HTML <div> element or a JSF h:dataGrid (1x1 cell grid), whichever you prefer. Use one zone to hold the header and the other to hold the content and make only the content zone scrollable.

Variants of this approach include making a 1x2 grid with the header in the top cell and a nested div or 1x1 grid in the bottom cell. Same deal - make the content area scroll and leave the header area fixed.
 
Astria Bothello
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Tim - it worked.
 
santhana Marimuthu
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi tim i am also facing this same problem.i already did what you mentioned and its working fine.
but if i am use HTML <div> element then if i change modal panel size after that scroll bar not resized.
my requirement is when ever i resize the modal panel then scroll bar also will get resize.
so i wrote the following example code,

<rich:modalPanel id="logModalPanel"
width="800"
resizeable="true"
style="height:600px;overflow:scroll;">
</rich:modalPanel>

now i can resize the modal panel.but when ever i scroll the modal panel then its header also moving.
how can i fix it?
 
Tim Holloway
Saloon Keeper
Pie
Posts: 18025
47
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Supposedly there are better options in RichFaces 4. I cannot say because I have a heavy investment in RichFaces 3 and RichFaces 4 is like VB.Net was to VB6 - punitively expensive to migrate to.

One option otherwise would be to put the header in a separate nonscrollable div of its own.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic