CODEWITHSUNDEEP
jquerycsshtmljquery-mobile
Cechinel
Cechinel

Reputation: 707

Jquery Mobile Collapsible Listview Align Text and Button

Here is what I'm doing: JsFiddle

I want the word 'New' horizontally centered and the buttons "Something" and the Flipswitch vertically centered.

Is it possible?

I tried it but It doesn't work:

<div data-role="collapsible" data-theme="b" data-inset="true" data-icon="false" style="text-align: center !important;">
    <h2 style="text-align: center !important;">New</h2>


            <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
                <a href="#" class="ui-btn ui-btn-b ui-li-count">Something</a>
            </div>


            <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
                <select data-role="flipswitch"> 
                    <option value="Off">Off</option>
                    <option value="On" selected="selected">On</option>
                </select>
            </div>

I'm using Jquery Mobile 1.4 and Jquery 1.10.2, but I'm not so good with css.

Thanks advanced.

Upvotes: 2

Views: 1423

Answers (1)

Omar
Omar

Reputation: 31732

For buttons and flip switch, wrap each element in a span with class ui-btn-right to align it to right side.

<li data-icon="false">
  <a href="#">Type 1</a>
  <span class="ui-btn-right">
    <a href="#" class="ui-btn ui-btn-b ui-mini">Something</a>
  </span>
</li>

To center align collapsible's header, you need to override ui-collapsible-heading-toggle.

updated

Based on @ezanker's comment

.ui-collapsible .ui-collapsible-heading-toggle {
  text-align: center;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

li > a.ui-btn {
  padding-right: 120px;
}

Demo

Upvotes: 3

Related Questions