jQuery Forum

Hi,

I am using jquery-2.1.0 and jquery.mobile-1.4.2.

I have header html something like following:

<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a class="ui-btn ui-btn-inline ui-icon-phone ui-btn-icon-left" href="../common/notifications.html">Notifications</a>
</li>
</ul>
</div>
</div>


This hyperlink text 'Notifications' gets truncated on the mobile screen(I observed in chrome emulator). After reviewing css found out that css "display: block;" was causing this truncated text.

I do not want this truncation. I tried to set different values for ".ui-navbar li .ui-btn" class, but with no help.

Please suggest what value should I set to avoid truncation in my css:


.ui-navbar li .ui-btn
{
display: <What value???>;
}


Or is there any other way to achieve this?

Thanks in advance.