Canvas Support

Bug? Alignment issue when applying text styles in lists

3 replies·opened Jan 9, 2022
J
joostv4Jan 9, 2022

Hi again,

When adding styling to texts in bullet lists, AND the texts covers multiple lines, the lines are not aligined properly below the first one. See attachment.
Could you please check what is wrong?

Thanks!

HTML:

<ul class="iconlist">test list:
	<li><i class="icon-line-circle-check"></i><div class="first-letter">L</div>orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec tincidunt lectus. </li>
	<li><i class="icon-line-circle-check"></i><div class="first-letter">Idd</div>In eleifend felis felis, at rutrum ex volutpat sit amet. Pellentesque eget arcu magna. Sed ultrices molestie cursus. Ut accumsan tellus sed porttitor suscipit. Nulla pharetra rutrum egestas. Ut bibendum ligula lectus,</li>
	<li><i class="icon-line-circle-check"></i><div class="first-letter">Non condim</div> nisl hendrerit et. Aenean et massa a urna ullamcorper lobortis vitae non justo. Donec gravida luctus libero, vel elementum ligula suscipit in. Quisque nunc sapien, accumsan a ligula non, suscipit porta elit. Curabitur nibh mi, facilisis sit amet luctus ac, porta nec enim. Cras mollis auctor ligula. Integer cursus ante sit amet velit fermentum fermentum. Nunc a nisi libero.</li>

CSS:

.first-letter	{
   color: #9AC5CE;
   font-weight: bold;
}
S
SemiColonWebSTAFFJan 10, 2022

Hello,

When using Custom Content inside the Icon Lists, consider wrapping the Content inside an additional DIV. Additionally, DIV has block style by default, so consider using span instead. Example:

<ul class="iconlist">
	<li><i class="icon-line-circle-check"></i><div><span class="first-letter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec tincidunt lectus.</div></li>
	<li><i class="icon-line-circle-check"></i><div><span class="first-letter">Idd</span>In eleifend felis felis, at rutrum ex volutpat sit amet. Pellentesque eget arcu magna. Sed ultrices molestie cursus. Ut accumsan tellus sed porttitor suscipit. Nulla pharetra rutrum egestas. Ut bibendum ligula lectus,</div></li>
	<li><i class="icon-line-circle-check"></i><div><span class="first-letter">Non condim</span> nisl hendrerit et. Aenean et massa a urna ullamcorper lobortis vitae non justo. Donec gravida luctus libero, vel elementum ligula suscipit in. Quisque nunc sapien, accumsan a ligula non, suscipit porta elit. Curabitur nibh mi, facilisis sit amet luctus ac, porta nec enim. Cras mollis auctor ligula. Integer cursus ante sit amet velit fermentum fermentum. Nunc a nisi libero.</div></li>
</ul>

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
joostv4Jan 10, 2022

Hi,

Using your code gives even stranger results ;). See screenshot.

S
SemiColonWebSTAFFJan 10, 2022

Hello,

We had checked these codes before providing these to you. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Additionally, please consider double checking that your codes matches the codes provided above.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard