The AdminLTE theme sidebar menu title does not display properly when the title is long. Instead, it breaks the line and shows the text below the icon. I would like it to start below the first letter of the first line. I have attached a screenshot for reference. In the image, "consetetur" should align exactly below the word "Lorem."
https://i.sstatic.net/Px9ge.jpg
Here is the code snippet:
<li class="treeview">
<a href="#">
<i class="fa fa-circle-o"></i>
<span style="padding-right: 50px; white-space: normal; line-height:14px">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu" style="display: none;">
<li>
<a href="#">
<div style="width:100%; display:inline-block">
<div style="width:10%; float:left; padding-top: 5px;">
<i class=" fa fa-arrow-circle-right"></i>
</div>
<div style="width:90%; float:right">
Lorem ipsum dolor
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div style="width:100%; display:inline-block">
<div style="width:10%; float:left; padding-top: 5px;">
<i class=" fa fa-arrow-circle-right"></i>
</div>
<div style="width:90%; float:right">
Lorem ipsum dolor
</div>
</div>
</a>
</li>
</ul>
By using the CSS:
a { display: table} a>* { display: table-cell;}
you can achieve the desired alignment as shown in the image below:
https://i.sstatic.net/H5iWO.jpg
The text will start right next to the icon.
Thank you.