How to control jQuery mobile management group size?

Question

I am using jquery mobile, and I have a management group that displays as follows:

However, if you go to this page, http://jquerymobile.com/demos/1.0.1/docs/forms/textinputs/index.html , on the top panel you will see the following control group;

Am I still trying to understand how jquery makes a control group smaller?

Answer 1

Additional CSS added to jQM Demo

• http://jquerymobile.com/demos/1.0.1/docs/_assets/css/jqm-docs.css

Class placement in the <ul> element

 class="localnav" 

Example:

 <ul data-role="controlgroup" data-type="horizontal" class="localnav"> <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li> <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li> <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li> <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li> </ul>​ 

and adding this CSS

 .localnav { margin:0 0 20px 0; overflow:hidden; } .localnav li { float:left; } .localnav .ui-btn-inner { padding: .6em 10px; font-size:80%; } 

Should get the desired results, but it really sets the font size that does it

Answer 2

In the control group, you add data-mini = "true" as follows:

 <div data-role="controlgroup" data-type="horizontal" data-mini="true"> 

Answer 3

What I would do is wrap your buttons inside a container like this:

 <div class="buttonsHere"> <button class="myButton" id="search">Search</button> <button class="myButton" id="latest">Latest</button> <button class="myButton" id="top">Top</button> </div> 

Then in your stylesheet do the following:

 .buttonsHere.ui-btn-text { font-size: 20px; } 

Let me know if this works, as I cannot check it here. Hooray!

Answer 4

If you dig out the code with firebug, you can find out that the ul children are like ul> li> a> span> span . And in the last span tag you will have css as follows.

 .localnav .ui-btn-inner { font-size: 80%; } 

If you change the font size to less than% or in px, you can get the required size. I think the following will work

 $('ul li li a span span').css('font-size',60%'); 

I did not make any example. Please ignore this if it does not work for you.