CODEWITHSUNDEEP
cssjquery-mobile
siva636
siva636

Reputation: 16441

Wrapping collapsible in jQuery Mobile

Consider the following jQuery Mobile markup:

    <div data-role="collapsible">
      <h3 style="white-space:normal">This heading is not
wrapping even after "white-space:normal" style is applied</h3>
       <p>This content is wrapping without any problems</p>
     </div>

The heading should wrap due to the style "white-space:normal", but it is not happening.

Why this is so?

What can I do to wrap the heading?

Upvotes: 2

Views: 1834

Answers (3)

Richard
Richard

Reputation: 2100

As of version 1.4.3, you now need to do something like this in your CSS:

h3 .ui-btn{white-space:normal !important;}

I had this issue, and it was driving me crazy because all the examples online were for older versions of jQuery Mobile, and apparently the good people at jQuery Mobile changed up their class names over time.

Upvotes: 4

Robin Manoli
Robin Manoli

Reputation: 2222

The actual text of the h3, after jquerymobile had its ways, is not directly inside the h3 tag. The answer is to use the css on the class ui-btn-text. So if you want to implement it for buttons made from h3 tags:

<style>
h3 .ui-btn-text{ white-space:normal; word-break:break-all; }
</style>

The h3 tag's html after jquerymobile had loaded looks something like this:

<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
    <a href="#" ...>
        <span class="ui-btn-inner">
            <span class="ui-btn-text">The actual h3 text
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
       </span>
    </a>
</h3>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

...............................................................

Used to this 

word-break:break-all

as like this 

h3{
word-break:break-all;
}

Upvotes: 1

Related Questions