Ayman Ayman - 5 months ago 36
CSS Question

Link button and Bootstrap glyphicons styling issue

The issue I have that when I use LinkButton in dropdown-menu the icon and LinkButton text are showed in tow separate lines.

OUTPUT

HTML

<ul class="nav navbar-nav navbar-right">
<li>
<a data-toggle="dropdown" class="dropdown-toggle text-white" href="#">Hi,
<asp:Label ID="lbllname" runat="server" Text=""></asp:Label>
<b class="caret"></b>
</a>
<ul style="margin: 25px 15px 0 0;" role="menu" class="dropdown-setting dropdown-menu bg-amber">
<li>
<a href="#">
<span class="entypo-user"></span>&nbsp;&nbsp;My Profile</a>
</li>
<li>
<a href="#">
<span class="entypo-vcard"></span>&nbsp;&nbsp;Account Setting</a>
</li>
<li>
<a href="#">
<span class="entypo-lifebuoy"></span>&nbsp;&nbsp;Help</a>
</li>
<li>
<a href="#">
<span class="icon-upload"></span>&nbsp;&nbsp;
<asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">Log out</asp:LinkButton></a>
</li>
</ul>
</li>
</ul>


Link button rendered in the browser like below

<li>
<a href="#">
<span class="icon-upload"></span>&nbsp;&nbsp;
</a><a id="btnlogout" href="javascript:__doPostBack('ctl00$btnlogout','')">Log out</a>
</li>

Answer

Just give this as a CSS Fix:

.navbar-right li {white-space: nowrap;}

It is caused because of your improper usage of &nbsp;, which can be fixed by forcing the browser to render the text in a single line, using the nowrap.

Another issue is you have a nested <a> tag. This shouldn't happen. Please change the markup this way:

<asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">
    <span class="icon-upload"></span> Log out
</asp:LinkButton>