inhaler inhaler - 5 months ago 69
AngularJS Question

Text overlapping in my sidebar

I am experiencing a weird glitch, i see text overlap in my sidebar. Image attached overlapping text image link

I am not sure how this happens and i have been trying to figure it out. The overlap is not present when i hover over the item. Here is my html for the sidebar

<!-- Sidebar Menu -->
<div ng-controller="SidebarController">
<ul class="nav sidebar-menu" ng-repeat="comp in competition track by $index" id="rcs-menu-item">
<li ui-sref-active="active" >
<a href="javascript:void(0)" id="{{comp.competitionID}}" ng-click="getTeams(comp.competitionID, comp.Name, comp.calenderID, comp.customName)">
<i class="menu-icon fa fa-soccer-ball-o"></i>
<span class="menu-text">{{comp.Name}}</span>
<!-- /Sidebar Menu -->

Any suggestions would be greatly appreciated.


Seems like that's the text of the first entry, which is broken into the second line ("South America).

We'd need the CSS to find out what's wrong - probably a fixed height for the individual entries / li tags