4 Replies Latest reply on Mar 4, 2011 10:20 AM by amandaesweeney

    Horizontal Scrollbar Issue

    amandaesweeney

      Hello,

       

      I'm having an issue with the horizontal scrollbar. The problem is that whenever a vertical scrollbar is rendered on a rich:panelBarItem, a horizontal one appears too, even though it is not needed, I've removed all but one columns from my table within the panel to make sure that the width of the table was not the issue, but it doesn't seem to matter what the table width is, as long as a vertical scrollbar is needed on the panel a horizontal one also appears.

       

      I'm using RichFaces 3.3.2. Any help would be greatly appreciated as this is really frustrating. The issue arises in IE8 but not in Firefox.

       

      Thanks,

      Amanda

        • 1. Horizontal Scrollbar Issue
          ilya_shaikovsky

          You could check 3.3.3.Final (dealed with some issues like that but can't promise that solved for that particular component).. Or could solve easilly on your own by using corresponding rich-* css class for item and setting overflow-y to be hidden and x - auto.

          • 2. Horizontal Scrollbar Issue
            amandaesweeney

            Hi Ilya,

             

            Thanks for the quick response. I've tried all of the following, but nothing seems to make a difference. I want the vertical scrollbar, but not the horizontal so I've been setting x to hidden and y to auto. Which style would you recommend adding the css for?

             

            .rich-panelbar-content

            {

                 overflow-x: hidden;

                 overflow-y: auto;

            }

            .rich-panelbar

            {

                 overflow-x: hidden;

                 overflow-y: auto;

            }

            .rich-panelbar-interior

            {

                 overflow-x: hidden;

                 overflow-y: auto;

            }

             

            Thanks,

            Amanda

            • 3. Horizontal Scrollbar Issue
              amandaesweeney

              Using IE Developer Tools I was able to see where the issue is, if I remove the "overflow:auto"  from the line below and refresh the page, the horizontal scrollbar disappears.

               

              <div class="rich-panelbar-content-exterior" style="width: 100%; display: block; height: 308px; overflow: auto;">

               

              So I added the following to my css file

               

              .rich-panelbar-content-exterior {

                  overflow-x:hidden;

                  overflow-y:auto;

              }

               

              But when I reload the application the following line still gets added for the div,

               

              style="width: 100%; display: block; height: 308px; overflow: auto;"

               

              Any ideas?

              • 4. Horizontal Scrollbar Issue
                amandaesweeney

                I resolved this issue by adding !important to the overflow attributes of the style.

                 

                .rich-panelbar-content-exterior {

                    overflow-x:hidden !important;

                    overflow-y:auto !important;

                }