5 Replies Latest reply on Aug 2, 2012 11:07 AM by Jon Tara

    Scrolling is not happening for element overflow

      Whenever an element has content larger than its container, the overflow CSS property is used to control whether the extra content is hidden, scrollable, visible, etc. For our use case, we need to be able to vertically scroll through a large amount of text within a container element. On Webkit browsers setting the "overflow-y" CSS property to "scroll" gives us what we're looking for. On the ET-1, RhoElements displays the container as expected, but there is no scrollbar present and scrolling isn't possible. Attempting to scroll through the contents simply scrolls the entire page.

        • Re: Scrolling is not happening for element overflow
          Sushil Gusain

          Hi Zac,

           

          Try this code-

           

          <html>

          <head>

          <style type="text/css">

                    .scrollable{

                    overflow: hidden;

                    position: relative;

                    }

          .scrollable > *:first-child {

                    display: block;

                    position: relative;

                    overflow: hidden;

          }

                    #div1

                    {

                    -webkit-box-flex: 2;

                    position: relative;

           

           

                    display: -webkit-box;

                    -webkit-box-orient: vertical;

                    -webkit-box-align: stretch;

                    height: 100%;

                    width: 100%;

                    }

          .sb_bar {

                    position: absolute;

                    display: block;

                    width: 100%;

                    background: orange;

                    top: 0;

                    left: 0;

                    z-index: 99;

          }

          </style>

          </head>

          <body>

          <div id="div1" class="scrollable">

          <center>

          <div id="divSeats" class="divFrom" style="height: 50%; overflow: auto">

          <table width="100%">

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          <tr>

          <td>1nvbnvncvbnvcvbnvbnvcvbnvbnvbvbn

          </td>

          </tr>

          </table>

          </div>

          </center>

          </div>

          </body>

          </html>

          • Scrolling is not happening for element overflow

            Thanks for your input. Sushil, that example isn't working for us. We see the pane at half screen height as expected, but it's not scrollable and there's no visual indication it can be.

             

            Let me back up a bit: we don't necessarily need to use the overflow-y css value. We just need some way to scroll pane contents independently of the entire page. Does RhoElements support this without a plugin?