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.
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).
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
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.
(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:
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
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;
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With