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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts

    bottom-aligned text

    Hi
    I'd like some text to sit at the bottom of its containing element (which has fixed dimensions). When the text is added to via JavaScript such that it stretches upwards into otherwise empty space and overflows the element, a vertical scroll bar should appear.

    Visually speaking: a block of text should appear in an enclosing box with the bottom edge of the text against the bottom of the box. Should the text become too large for the box, the beginning of the text should be visible and a scroll bar should appear to make the end of the text revealable.

    The best I've come up with is a two element solution:

    Code:
    <div style="height: 50px; width: 70px; overflow: auto; position:absolute; border:solid;">
    
    <span style="position:absolute; bottom:0px;" >8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  </span>
    
    </div>
    The text sits nicely at the bottom of the parent div, but when it's as long as that above, the overflow is hidden and a scroll bar does not appear.

    I've tried a display-table type solution with no success.

    Any thoughts much appreciated!

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by realtimethrill View Post
    Hi
    I'd like some text to sit at the bottom of its containing element (which has fixed dimensions). When the text is added to via JavaScript such that it stretches upwards into otherwise empty space and overflows the element, a vertical scroll bar should appear.

    Visually speaking: a block of text should appear in an enclosing box with the bottom edge of the text against the bottom of the box. Should the text become too large for the box, the beginning of the text should be visible and a scroll bar should appear to make the end of the text revealable.

    The best I've come up with is a two element solution:

    Code:
    <div style="height: 50px; width: 70px; overflow: auto; position:absolute; border:solid;">
    
    <span style="position:absolute; bottom:0px;" >8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  8 8  </span>
    
    </div>
    The text sits nicely at the bottom of the parent div, but when it's as long as that above, the overflow is hidden and a scroll bar does not appear.

    I've tried a display-table type solution with no success.

    Any thoughts much appreciated!
    try to set overflow: auto to the span element.

    regards

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That didn't work, but thank you.

    (I think the overflow property only applies to elements with fixed dimensions.)

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by realtimethrill View Post
    That didn't work, but thank you.

    (I think the overflow property only applies to elements with fixed dimensions.)
    post a link to the test page, please.

    best regards

  • #5
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by realtimethrill View Post
    try this:
    Code:
    .thespan {
    bottom:0px;
    position:absolute;
    top:0pt;
    }
    best regards

  • #7
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The scroll bar appeared, but the shorter version of the text didn't sit at the bottom of the box.

    Please keep the ideas coming as I'm totally at a loss!

  • #8
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts
    At the risk of hassling everyone with the same question again... Would it be fair to conclude that the only way to make this work is with JavaScript?


  •  

    Posting Permissions

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