Prevent jQM from truncating a Button Label

jQuery Mobile has been designed for responsiveness and to adapt the UI to different devices and screen sizes. One of the according features is to automatically truncate the labels of UI elements if they would not fit to the screen otherwise.

The automatic truncation and replacements with ellipsis (…, three points in a row) works fine for the majority of elements. However, sometimes, especially for very short labels (e.g. “GO”), you will ensure the label to be presented.

This can be achieved with CSS. It is recommended to specify the CSS below explicitly for particular elements to prevent the jQM’s responsiveness for the rest of the user interface.

CSS:

.searchform .ui-input-btn { 
  white-space: nowrap !important; 
  overflow: visible !important; 
}

HTML:

<div class="searchform">
  <input type="submit" value="GO">
</div>

Leave a Comment