Forum Discussion

cblown's avatar
cblown
Boss
12 years ago

Truncation issue in TKB V2 - Section Browser Component

Hey

 

We're seeing a strange issue in Firefox (v17.01) where items in the Section Browser component (TKB V2) are being truncated.

They are being correctly truncated in Chrome and Safari, but Firefox is just leaving (...) for each listed item. (see attached) 

 

We've stripped out our JS and CSS as we initially thought it might be effected by something we've added, but the problem is still present.

We're hoping someone could check this on another system for us to see if they can duplicate the issue?

 

Disabling javascript in the brower results in the items showing (without truncation)

 

I believe we're on Lithium v12.9.

 

 


Firefox-Issue.pngChrome-Expected.png
  • cblown's avatar
    cblown
    Boss
    12 years ago

    We set a default theme and the problem wasn't present. So we further investigated by removing items from the theme one by one.

     

    Once we removed the CSS file the problem went away and this is where it gets a bit strange, it seems the Lithium Ellipsis JS routines don't work properly when the line height isn't 15px; At least on the TKB V2 Section Browser component. 

     

    Removing

    #lia-body.TkbCommunityPage .lia-component-sections-widget-sections-browser-taplet .lia-section-message-list li {
	line-height: 16px;
}

    fixed the problem.  If this is set to 15px no problems, set this to anything other than 15 and the routine deletes whole chunks of HTML.

     

    HTML goes from this 

     

    <ul id="list_3" class="lia-list-standard lia-section-message-list">
	<li>
		<div id="ellipsistext_6" style="max-height:15px" class="lia-ellipsis-text">
			<a class="lia-link-navigation lia-section-message-title" id="link_24" href="/t5/Tablets-Knowledge-Base/Warranty/ta-p/321">Warranty</a>
		</div>
	</li>	
</ul>

    quite literally to this

     

    <ul id="list_3" class="lia-list-standard lia-section-message-list">
	<li>
	...
	</li>	
</ul>

     

    The problem was only showing itself in Firefox because we had set line-height to be 1.3 which on Chrome and Safari equalled 15px, however on Firefox it must have been something else.

     

    This is repeatable, simply add the above CSS to a default theme and reloading the TKB Community Page V2.