CODEWITHSUNDEEP
jquery-mobilecenterfooter
tj_carroll
tj_carroll

Reputation: 81

How do I center a horizontal control group in the footer - changed in jqm 1.1.1?

This used to work to center the controlgroup in 1.1.0, but now it seems like it doesn't in 1.1.1.

<div data-theme="a" data-role="footer" style="text-align:center;">
   <div data-role="controlgroup" data-type="horizontal" data-mini="true">
      <a href="foo" data-role="button">link1</a>
      <a href="boo" data-role="button">link2</a>
   </div>
   <div class="copy">&copy; 2012 bigco</div>
</div>

Upvotes: 7

Views: 10456

Answers (4)

humkins
humkins

Reputation: 10705

Probably align="center" attribute of data-role="controlgroup" div could be suitable for that.

<div data-theme="a" data-role="footer" align="center">
   <div data-role="controlgroup" data-type="horizontal" data-mini="true">
      <a href="foo" data-role="button">link1</a>
      <a href="boo" data-role="button">link2</a>
   </div>
   <div class="copy">&copy; 2012 bigco</div>
</div>

http://jsfiddle.net/sGFTy/1/

Upvotes: 11

Frank
Frank

Reputation: 6687

I found the solution on this site: http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons

The CSS:

#navgroup {text-align:center;}
#navgroup div {display:inline-block;}

The HTML:

<div id="navgroup">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="index.htm" data-role="button" data-theme="e" data-mini="true" class="active menu">Menu</a>
      <a href="specials.htm" data-role="button" data-theme="e" data-mini="true" class="specials">Specials</a>
      <a href="howitworks.htm" data-role="button" data-theme="e" data-mini="true" class="howitworks">FAQ</a>
      <a href="http://www.facebook.com" data-rel="external" data-role="button" data-theme="e" data-mini="true"  class="feedback">Facebook</a>
    </div>
</div>

Upvotes: 5

genkilabs
genkilabs

Reputation: 2986

Now I'm on JQM 1.2 and this works for me...

CSS

.center-controlgroup { text-align: center; }

HTML

<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>

Upvotes: 0

Michael E.
Michael E.

Reputation: 166

Issue still persists if using $("selector").show(); to display element since it applies 'display:block'.

Instead of using .show(), now use $("selector").css('display', 'inline-block');

Upvotes: 0

Related Questions