2

I want to have a list grow upwards (not downward) inside a div. Then to scroll the list within that div when there are too many li items. Is this combination possible?

The scrolling is easy - fix the height of the div and set the style of that div to overflow-y: scroll;

The bottom vertical aligned li was tricky and I chose the simplest solution which was to style the containing div as position: relative; and the ul within as position: absolute; bottom: 0;

But I want both behaviours. Unfortunately achieving the bottom vertical aligned li breaks the scrolling. Or rather, the scrolling happens but I can't drag scroll with the mouse anymore - the scrollbar doesn't appear either.

Here is the fiddle http://jsfiddle.net/tcab/Am3uL/

Here is my html

<div>
    <ul>
        <li>six</li>
        <li>five</li>
        <li>four</li>
        <li>three</li>
        <li>two</li>
        <li>one</li>
    </ul>
</div>

and here are the relevant styles

div.scroll {
    overflow-y: scroll;
}
.bottomalign_ul {
    position: absolute;
    bottom: 0;
}
.bottomalign {
    position: relative;
}

Basically I want to apply all three styles at once - and get the desired effect.

$('div').addClass('bottomalign');
$('ul').addClass('bottomalign_ul');
$('div').height(100);
$('div').addClass('scroll');

Though this sort of works, the list is merely clipped within the div and I can't scroll it with the mouse anymore.

XeniaSis
  • 2,192
  • 5
  • 24
  • 39
abulka
  • 1,316
  • 13
  • 18
  • I think the problem has to do with you making the ul elements absolute. – imtheman Mar 09 '14 at 00:24
  • Yeah, I have a feeling that I have two CSS directives that are 'fighting' each other. But what is the solution? I want a HP RPN (reverse polish notation) style calculator stack that grows upwards, yet allows scrolling with the mouse when needed? – abulka Mar 11 '14 at 11:09

1 Answers1

2

A workaround is to always scroll to bottom when you load the list. So it looks as if its growing bottom up. Is that right? If so check the following solution

dive bottom up scroll

Edit:

I slightly modified following bits of your fiddle and got scroll bar to bottom in scenario 'both'

css:

.bottomalign_ul {
    position: absolute;    
 }

JQuery:

function scroll() {
    $('div').height(100);
    $('div').addClass('scroll');
    $('div').scrollTop(200);
}
Community
  • 1
  • 1
voddy
  • 950
  • 1
  • 11
  • 21
  • I want to emulate a RPN calculator stack that grows upwards as you enter numbers and strings onto the stack. Remember the way HP calculators worked? New entries push onto the stack at the bottom. I also want to be able to swipe/mouse drag to scroll through the previous entries that have scrolled off the screen. Yes, when you enter a fresh number the stack will typically scroll to the bottom again to show it. – abulka Mar 11 '14 at 11:03
  • I think @voddy has the right idea. Because in JQuery you can append elements to the bottom, then use the scroll method to make sure it stays at the bottom. – imtheman Mar 11 '14 at 17:18
  • I'm happy to scroll to the bottom when new entries are added to the list. But I don't think that 'workaround' achieves anything relevant to what I'm asking. I need a list that grows from the bottom up (rather than from the top growing down) and which allow for manual mouse scrolling at any time. Whether the list scrolls to the bottom as new entries are made sounds off-topic to what I'm asking. Check out my jsfiddle link in my question and click on the 'both' link - notice how it doesn't scroll? How do I make it scrollable? – abulka Mar 23 '14 at 13:40
  • check my edit above. I used scrollTop method to set the scroll bar position to bottom. See if it helps you. – voddy Mar 23 '14 at 22:13