Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rendering <ul> elements bottom to top

I have an ul with variable element count. When the li are too wide for list to handle them in single line it breaks the line and starts to render the li on lower line so I get something like this:

x - stands for element of a list

| - stands for list boundaries, or whatever that limits list width

|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered below
|xxxx     |

What I need is to render elements bottom-top so I could get:

|xxxx     |
|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered above

Is it possible?

Here is some example code

<ul>
  <li>Some content</li>
  <li>Other content</li>
  <li>ContentContent</li>
  <li>Zawartość Contentu</li>
</ul>

Currently, it's CSS-free. I can add anything you will recommend to render it bottom-top order. Something like float:bottom which unfortunately doesn't exist.

like image 930
S3Mi Avatar asked Dec 29 '11 11:12

S3Mi


People also ask

How to arrange elements from top to bottom instead of left to right?

Arranging Elements from Top to Bottom instead of Left to Right (float: down?) Take your JavaScript to the next level at Frontend Masters . Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right).

When is an element being rendered?

An element is being rendered if it is in a Document, either its parent node is itself being rendered or it is the Document node, and it is not explicitly excluded from the rendering using either: the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or

How do I render an element in React DOM?

To render a React element into a root DOM node, pass both to ReactDOM.render (): It displays “Hello, world” on the page. React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

What are the CSS Values used for the rendering?

(These are CSS values used by the next section to set CSS properties for the rendering; 'vw' and 'vh' are CSS units.) [CSSVALUES] Determine the value of x-position or y-position for cue as per the appropriate rules from the following list:


2 Answers

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

source: Bottom to top <ul> element arrangement

like image 133
bancer Avatar answered Sep 20 '22 05:09

bancer


Bottom to top text direction isn't supported in css (http://dev.w3.org/csswg/css3-writing-modes/#writing-mode1), so any solution will require javascript or server-side manipulation.

Here's one solution using jQuery to manually slice up your long elements into smaller strings with <br /> tags at the beginning.

Demo: http://jsfiddle.net/FGk5R/2/

Code:

var LIST_WIDTH = 25; // Manually adjust this to change the width of your list to fit your container element
$('ul li').each(function(){
    var listitem = $(this).html();
    $(this).html(bottomToTop(listitem));

    function bottomToTop(item)
    {
       var length = item.length;
       var newhtml = '';

        if (length <= LIST_WIDTH)
        {
            return item;
        }
       while (length > 0)
       {          
            if (length <= LIST_WIDTH)
            {
                var newhtml = item.slice(-LIST_WIDTH) + newhtml;
            }
            else
            {
                var newhtml = '<br />' + item.slice(-LIST_WIDTH) + newhtml;
            }

            item = item.substr(0, (length - LIST_WIDTH));
            length = item.length;
        }
        return newhtml;
    };  
});
like image 35
Chris Fletcher Avatar answered Sep 22 '22 05:09

Chris Fletcher