CODEWITHSUNDEEP
cssjquery-mobilesize
Noor
Noor

Reputation: 20178

How to control Size of Jquery mobile control group?

I'm using jquery mobile and I have a control group which is being rendered like this:

enter image description here

However if you go on this page, http://jquerymobile.com/demos/1.0.1/docs/forms/textinputs/index.html, u'll see on the top a control group like the following;

enter image description here

I'm still trying to know how jquery makes its control group smaller in size?

Upvotes: 4

Views: 5020

Answers (4)

Zoe Marmara
Zoe Marmara

Reputation: 1144

In the controlgroup you add data-mini="true" like this:

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

Upvotes: 2

Reddy Prasad
Reddy Prasad

Reputation: 251

If you digg the code by using firebug then you can came to know that the childrens of ul is like this ul > li > a > span > span . And in the final span tag you will have the css as follows.

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

If you change the font-size to some what less % or in px , you can get your required size. I think the following thing will work

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

I haven't done any example .. please ignore this if it not work for you

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85378

On the jQM Demo they have added additional CSS

Placing the class on 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 results you want but it's really setting the font size that does it

Upvotes: 2

TroodoN-Mike
TroodoN-Mike

Reputation: 16185

What I would do is to 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 like this:

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

Let me know if this works as I cannot test it here. Cheers!

Upvotes: 1

Related Questions