I'm Trying to create a 3 column ordered list in Joomla. I've tried these methods for continuing the numbering:
<ol style="counter-reset: item 11;">
to start the numbering from 11 for column two. And also this:
<ol start="11">
But neither of these work. Are there any restrictions on this in Joomla?
Thanks!
You could probably split a single list into columns by styling the list with a fixed height, then styling your list items so that they're positioned where you want. You could assign each list item in a given column a class, then give the columns a margin-left.
Alternatively you could absolutely position your list items.
Both solutions are pretty dirty, but I think they would work.
Is this something you'll need other users to be able to do for themselves in Joomla?
Related
For a printable layout I want to display a dynamic list (coming from an array) that should 'flow' through 4 columns of different heights, to look like this:
The blue elements are the four columns with the list (ul) inside.
The heights of the blue columns are fixed.
How can I achieve this with CSS? I looked at multicolumns in css but there the columns have to be the same height so that's not working I guess.
What's the best way to do this? It's fine if it only works in current web browsers.
I checked out 'flexbox' as well as 'css-grid' and even though it may be achievable I resign from doing it.
Instead I took another way and changed the initial array in the way I can comfortably place it in the different (now not connected) DIVs.
I have an unordered list that contains several list items, split into 4 columns - Image below.
I'm having trouble getting the list-items at the upper level - The ones that have the images next to them in the image example - to break the column and start at the next column if they would otherwise overlap.
I've tried setting CSS attributes on each of the UL elements throughout the CSS, such as:
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
-o-column-break-inside:avoid;
However, nothing seems to change. I thought this was the style that would control this, but I must be wrong.
What I'm asking, specifically, is how I can prevent the contents of a list-item from wrapping to the next column in an unordered list.
I realized while attempting to create a sample for review, that the issue was only occurring for me in Internet Explorer.
Adding the style 'break-inside:avoid;' corrected the problem in that browser; it appeared the issue was not present in the browsers that were covered by the other styles.
I have list of items with alternating background colors. I'm currently using the :nth-child(odd) selector to make the alternating row colors. Users have the ability to add new items to the top of the list asynchronously using jquery -- this poses an issue that makes the form a bit unintuitive:
When a new entry is added to the top of the list, all the previously existing rows gets pushed down by one, so they all change alternating colors (since odd rows become even, and vice versa). I'd like to keep the existing alternating colors when a new row is added -- one way to do it would be to calculate odd/even nth-child starting from the bottom of the list... Any way to do this?
Additional info: New entries must be added to 'top' of list. Adding "odd"/"even" class names to rows not practical in this case.
Thanks in advance!
You will want to use the :nth-last-child(2n+0). This is working from the last child instead of the first/newest child. Hope this helps.
Is there a way to create a dynamic CSS for 2 columns? What I mean is, there are 2 columns in my webpage, the left and right column. It is similar to Facebook, where the profile picture is the left column and the right column is where your feeds are located. When a link is selected from the left column, without refreshing the page, the right column will display the page automatically. The left column is where my links are located and it is fixed. The only change factor is my right column. How can I create and apply the CSS?
You don't need a CSS template in order to use columns. All you need to do is set your column widths to percentages instead of pixels. If you're using a three column grid, with one div taking one column and the other spanning two, then the percentage for the first column would be 33.3333333% (don't bother rounding up, the browser will take care of it) and the second div would be 66.6666666%.
Also, in order for your second div to refresh without loading another page, you'll have to use Ajax.
There are css3 columns but they are not supported by IE. What a surprise!
It sounds more like you just need a css layout framework. Search for css frameworks / templates.
I of course recommend simpl.css.
The page is ugly at the moment but will be updated soon.
I have a list which displays votes cast on things in a descending order (=the dataprovider has a sort assigned).
The elements have variable height, but there are not so many elements, so i do not need to use a virtual layout
My problem is that this list needs to be updated real-time and i want to make this happen with a nice animation.
(e.g. if an item overtakes another by votes, then they swap places.)
Anyone knows how to make this animation with Flex 4.5 (spark list)?
Do i need to write a custom layout?
Thanks
If I were you, I'd just create a custom component which would have a simple layout (VGroup, maybe within a Scroller if you need a scrollbar) which then dynamically add item renderers to it. The thing about this one though is that your item renderer never changes it's data property. Make sure that the item renderer uses binding for it's data, and then on whatever you're sorting, have an animation between indexes of 2 items, make sure you set 'includeInLayout=false' before the animation for both items and just tween between their positions.
There are other ways of doing it using List, but then you'd have to make duplicates of the item renderers for the animations while the real ones are hidden and change their values. Not sure which one would be best in this case...