Search jQuery

jQuery Forum

Collapsible inside listview displays wrong width

in jQuery Mobile • 9 years ago

The following code causes the collapsed portion of the content to display wider than the collapse header.

 <ul data-role="listview" data-inset="true" data-divider-theme="f"> 
   <li data-role="list-divider">General Information</li> 
   <li data-role="collapsible" data-content-theme="d"> 
      <h3>CyberCafe</h3> <p>There will be a Cyber Cafe where you can 
          check your email or search the Internet from the Convention 
          floor.</p></li> 
  </ul>

Replies(1)

chetankja..

Re: Collapsible inside listview displays wrong width

9 years ago

If you see the jQM stylesheet, when you use a heading <Hx> in a list, the class ui-li-heading (with a specific margin setting) gets added to your code. But for your collapsible content, which is just a line item, this doesn't get added.

So one quick way to hack this is :

<ul data-role="listview" data-inset="true" data-divider-theme="f"> 
   <li data-role="list-divider">General Information</li> 
   <li>
     <div data-role="collapsible" data-content-theme="d" 
class="ui-li-heading"> 
      <h3>CyberCafe</h3> There will be a Cyber Cafe where you can 
          check your email or search the Internet from the Convention 
          floor.
      </div>
   </li> 
</ul>

Top Reply

Response title

Attachments

jQuery Forum

Collapsible inside listview displays wrong width

Replies(1)

Re: Collapsible inside listview displays wrong width

Statistics

Tags

Actions