CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Ryan Sayles
Ryan Sayles

Reputation: 3431

JQuery Mobile search filter

I am trying to figure out how to increase the size of the search filter bar for jquery mobile. Right now I have a content div with the following ul tag:

<ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>

My full working header is:

<div data-role="page" id="aPage" data-hash="false">
    <div data-role="content">   
            <h3>Header</h3>     
        <ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>
    </div>
</div>

In my css I have tried both:

.ui-listview-filter{
    height: 10%;
    font-size 120%;
}

and:

#alistview .ui-listview-filter{
    height: 10%;
    font-size 120%;
}

but neither of them worked. I'm pretty sure I'm using the correct class for styling. When I did a ctrl-shift-j in Chrome on the code it shows a segment of code for the search bar that is not in my source code which I assume is generated by setting data-filter ="true" Any help would be appreciated!

Upvotes: 0

Views: 1108

Answers (3)

Brian Phillips
Brian Phillips

Reputation: 4425

Your main issue is using height: with a percentage. From MDN:

The is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the value computes to auto. A percentage height on the root element (e.g. ) is relative to the initial containing block (whose dimensions are equal to the dimensions of the viewport).

Therefore, it's best to either a) set the height of the parent <div data-role="content">, or b) set the height to a pixel amount.

Use your original code to edit the spacing of the area around the input:

.ui-listview-filter {
    height: 100px;
}

jsfiddle 1

and modifying Thanassis_K's input code from above, it's best not to use percentage font-sizes on elements other than the body tag. Use px or em instead:

.ui-listview-filter input {
    height: 100px;
    font-size: 2em;
}

jsfiddle 2

Upvotes: 1

akakarikos
akakarikos

Reputation: 450

If i understand correctly, you want to increase the height and the font size of the <input> inside the filter bar, correct?

Then you could do something like:

.ui-listview-filter input{
    height: 10%;
    font-size 120%;
}

JSFiddle

Upvotes: 0

bmgh1985
bmgh1985

Reputation: 789

You seem to be missing a : in your code next to font-size. Try

.ui-listview-filter{
    height: 10%;
    font-size: 120%;
}

and see if that helps

Upvotes: 0

Related Questions