This week's book giveaway is in the JavaScript forum.
We're giving away four copies of Svelte and Sapper in Action and have Mark Volkmann on-line!
See this thread for details.
Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Rich Modal Panel Header Moving with scroll

 
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
[Thumbnail for modal.gif]
Moving header becoz of scroll
 
Saloon Keeper
Posts: 22496
151
Android Eclipse IDE Tomcat Server Redhat Java 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.
 
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
Posts: 22496
151
Android Eclipse IDE Tomcat Server Redhat Java 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.
 
    Bookmark Topic Watch Topic
  • New Topic