Custom List-Indentation Issue

[skalgutkar]

Hi everyone,

I have created a custom ordered list using Flare's Custom List feature. The indentation of the list items work fine till step 9. Starting step 10/double digits, the indentation changes. Please see the attached image. How can I fix this?

Thank you!

[AlexFox]

This looks to me like it's the double digits forcing the icon to be pushed to the left. Can you increase the right margin for the list?

[skalgutkar]

@AlexFox, thank you. You are right. The double digits, by default, behave that way. Even a regular numbered list behaves that way. Please see the attached screenshot.

Here's the CSS that is generated when I create a Custom List via Flare. I am still unable to fix this. Adding a right margin did not help.

ol.procedurelist
{
list-style-type: decimal;
list-style-image: none;
font-size: 16px;
font-family: 'Arial';
}

ol.procedurelist > li::marker
{
font-family: 'Arial';
font-weight: normal;
font-style: normal;
color: #ff4500;
font-size: 14pt;
content: '► ' counter(procedurelist);
}

Thank you,
Shrutika

[AlexFox]

It's a little bit more than you asked for, but I dug around and this stackoverflow answer offers a solution, albeit it utilises a grid display for the list and you need to change the alignment from right to left:

Code: Select all

ol {
  display: grid;
  grid-template-columns: min-content auto;
}

li {
  display: contents;
}

li::before {
  counter-increment: list-item;
  content: "►" counter(list-item, decimal) ".\a0";
  display: table-cell;
  text-align: left;
}

Code: Select all

<h4>HEADLINE</h4>
<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
  <li>Sixth Item</li>
  <li>Seventh Item</li>
  <li>Eighth Item</li>
  <li>Ninth Item</li>
  <li>Tenth Item</li>
</ol>