CODEWITHSUNDEEP
jquerycssjquery-mobile
Allyl Isocyanate
Allyl Isocyanate

Reputation: 13626

Prevent JQuery Mobile collapsible set header from being truncated

I'm using JQuery mobile's collapsible set, and my long header titles are being truncated (and made unreadable) when viewed on mobile devices.

For example the header defined here:

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>My header with lots of text that gets truncated when viewing on mobile device or small screen.</h3>
    <fieldset data-role="controlgroup">
    ...

Ends up being truncated to: My header with lots of text...

Following the advice of other posts, I tried:

<style type="text/css">
  .ui-header .ui-title .ui-btn-text .ui-collapsible-heading {
    overflow: visible !important;
    white-space: normal !important;
  }
</style>

...to no avail.

Upvotes: 2

Views: 3920

Answers (1)

Jasper
Jasper

Reputation: 76003

Here is the necessary CSS to make the title of a collapsible set multi-line:

.ui-mobile .ui-page .ui-content .ui-collapsible .ui-collapsible-heading .ui-btn-text {
    white-space : normal;
}​

Notice I targeted the .ui-btn-text element that is a descendant of the .ui-collapsible-heading element to get the desired effect.

This makes a very specific rule that will overwrite the default jQuery Mobile styling without the need to use !important.

Here is a demo: http://jsfiddle.net/JaPdC/

Upvotes: 7

Related Questions