Page 1 of 1
Custom List-Indentation Issue
Posted: Wed May 29, 2024 5:17 am
by 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!
Re: Custom List-Indentation Issue
Posted: Wed May 29, 2024 9:32 am
by 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?
Re: Custom List-Indentation Issue
Posted: Sun Jun 02, 2024 10:45 pm
by 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
Re: Custom List-Indentation Issue
Posted: Mon Jun 03, 2024 4:34 am
by 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>