CODEWITHSUNDEEP
jquery-mobiletruncation
ThePavolC
ThePavolC

Reputation: 1738

How to stop jquerymobile from truncating text in label?

I have this page in jquerymobile running in .net MVC4

<div data-role="header" data-theme="b" data-position="fixed">
     <h3 style="color:white;">
            Name
    </h3>
 <a href="#" data_icon="back"> Back </a>

    <div data-role="fieldcontain" class="test_row">
        <fieldset data-role="controlgroup" data-type="horizontal" class="test_row">
            <input id="radio3" name="testType" value="2" type="radio" checked="checked" class="test_type">
            <label for="radio3" class="test_type">All tests</label>
            <input id="radio1" name="testType" value="0" type="radio" class="test_type">
            <label id="test_type_label" for="radio1" class="test_type" >Automated</label>     
            <input id="radio2" name="testType" value="1" type="radio" class="test_type">
            <label for="radio2" class="test_type">Manual</label>
        </fieldset>
    </div>
</div>

CSS

.test_row .ui-btn {
    text-align: center;
}
.ui-field-contain .ui-controlgroup-controls {
    width: 100%;
}
.ui-controlgroup-controls .ui-radio {
    width: 33.3%;
}

http://jsfiddle.net/ruds5/jsfiddle

When you resize the result, middle word (Automated) is truncated into shorter form with '...' at the end.

Is it possible to prevent truncating at the end of the word?

Upvotes: 1

Views: 3185

Answers (2)

Emmanuel Gleizer
Emmanuel Gleizer

Reputation: 2018

Omar was correct with previous version of Jquery mobile. But with version 1.4.1 there is no more span, use:

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

Upvotes: 1

Omar
Omar

Reputation: 31732

Based on the updated question, here is the solution. The text style is wrapped with a with class .ui-btn-inner, button text style is overidden as follows.

span.ui-btn-inner {
 white-space: nowrap !important;
 overflow: visible !important;
}

Demo JSfiddle

Upvotes: 5

Related Questions