Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow div vertical scroll

    Hello,

    First, sorry on my bad english language but i hope you understand.

    Can i make DIV which in the beginnin doesn't have scroll and after content outgrow DIV then only vertical scrollbar appear?
    I need this to work on FF (all versions) and IE (6, 7, 8...)

    Can i do this with CSS or is better to write javascript whitch will do this.

    Structure of my div is:
    <div> // this is main DIV which i wanna to have only vertical scrollbar
    <div>this is row 1</div> // this DIV is sam width like main DIV
    <div>this is row 2</div>
    <div>this is row 3</div>
    </div>


    Example:
    <html>
    <head>
    <title>test</title>
    </head>

    <body>
    <div style="
    text-align:left;
    background-color: #99CCFF;
    overflow:-moz-scrollbars-vertical!important;!overflow:auto;
    width:256px;
    height:128px;
    ">
    <div style="width:256px;background-color: #339999;"> 1. row</div>
    <div style="width:256px;background-color: #339999;"> 2. row</div>
    </div>
    <br><br>
    <div style="
    text-align:left;
    background-color: #99CCFF;
    overflow:-moz-scrollbars-vertical!important;!overflow:auto;
    width:256px;
    height:128px;
    ">
    <div style="width:256px;background-color: #339999;"> 1. row</div>
    <div style="width:256px;background-color: #339999;"> 2. row</div>
    <div style="width:256px;background-color: #339999;"> 3. row</div>
    <div style="width:256px;background-color: #339999;"> 4. row</div>
    <div style="width:256px;background-color: #339999;"> 5. row</div>
    <div style="width:256px;background-color: #339999;"> 6. row</div>
    <div style="width:256px;background-color: #339999;"> 7. row</div>
    <div style="width:256px;background-color: #339999;"> 8. row
    </div>

    </body>
    <html>



    The behavior of the FF:
    - If it has less content than the size of a main DIV then a vertical scrollbar is visible but i don't wanna that (can i turn it off?)
    - If there is more content than the size of main DIV then it show only vertical scrolling which is ok (This is a situation that i want)


    Behavior in IE8:
    - If it has less content than the size of a main DIV then does not show a vertical scrollbar which is ok
    - If there is more content than the size of main DIV then i see a vertical scrollbar whitch is ok, but the problem is that it appears and horizontal scrollbar; the horizontal scroll appears because I use the DIV in the main DIV of the same width as the main div; so when the vertical scroll seize part of the main DIV these DIV no longer fit and creates a horizontal scrollbar; can i turn it off horizontal DIV?

    Thanks,

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hi mejl, if you set a height on a div and then add overflow: scroll; to that divs style rule, it should give you a scroll bar once your height is exceeded.


    edit: ok I should read the entire post before commenting...lol
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •