[Resolved] View with ordered list displayed with bootstrap has numbers on separate line

[Author]

Posts

[mikeS-30]

Tell us what you are trying to do? I have a view that displays a worldwide sales leaderboard. It needs to be an ordered list so salespeople can see what number they are compared to other salespeople (descending list sorted by total sales custom field). I found documentation that outlines how ol lists can't be edited with CSS so I followed the documentation to add the numbers using a :before pseudo element. I can get that to display but the issue is that I have bootstrap columns set up to display the loop. Since the loop editor and template uses bootstrap columns, the list numbers from the :before pseudo element are displaying on a line above the li items in the list. I'm 99% sure the issue is due to using bootstrap to create the columns but when I just use an ordered list without bootstrap, the data is scrunched together so it's hard to read. The loop editor and template code is as follows:

//Loop Editor

<div class="row">
<div class="col-sm-3">Distributor Name</div>
<div class="col-sm-3">Distributorship</div>
<div class="col-sm-3">Division</div>
<div class="col-sm-3">Total Sales</div>
</div>

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ol class="wpv-loop js-wpv-loop worldwide-list">
<wpv-loop>

[wpv-post-body view_template="loop-item-in-worldwide-sales-leaderboard-complete-list"]

</wpv-loop>
</ol>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

//Template

<div class="row">
<div class="col-sm-3">[types usermeta="distributor-first-name"][/types] [types usermeta="distributor-last-name"][/types]</div>
<div class="col-sm-3">[types usermeta="distributorship-username"][/types]</div>
<div class="col-sm-3">[types usermeta="division"][/types]</div>
<div class="col-sm-3">[types usermeta="contest-total"][/types]</div>
</div>

Is there any documentation that you are following?
https://toolset.com/forums/topic/my-loop-use-ordered-list-i-want-to-css-number-but-i-cant-find-their-class/
This is the documentation I used to remove the numbers from the ol and add numbers using the pseudo element.

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

[Christian Cox]

Hello, I think this is really more of a HTML/CSS question than a Toolset question. How would you do this in basic HTML without Toolset involved? A simple solution with Toolset is to use the wpv-loop-index shortcode to print out the row number in the loop, bypassing the need for an ordered list altogether. Documentation for that shortcode can be found here: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-loop-index

For a pure CSS solution, I can offer some ideas that might help you come up with your own custom styles. There's not going to be a simple solution that works really well at all screen resolutions, so you might need some media queries that apply different fixes at different screen widths. At full desktop resolution, I would position the :before pseudo element absolutely, which will take it out of the normal flow and allow the Bootstrap row to extend full width without breaking to a second line. Then add some left padding to the first child element of the first column to push the text over a bit, exposing the row number without any overlap.

In your stylesheet:

/* For Toolset support ticket #1691771 */
.worldwide-list li:before {
    position: absolute; 
}

In the Loop template:

<div class="col-sm-3"><span style="padding-left:30px;">Distributor Name</span></div>

Notice that I added a span and applied padding to that interior element. I did not set padding or margins directly on the Bootstrap column, which would inevitably break the grid structure. Again, these are just some ideas you can use in a custom code solution.

[mikeS-30]

My issue is resolved now. Thank you!