2

I have a jquery mobile list that has a search data-filter for the list. I'm trying to figure out how to change the css classes that control the data-filter. In particular, the outer background box color, but I'd like to know how to control all of the search box classes that are found in the jquery mobile.css.

I've gone through each jquery mobile 1.01.css ui-search class trying out different colors, positions, etc. I've stumbled on some things that work for the inner box color, but nothing for the outer background box or the inner search box outline colors when the area is selected.

Does anyone know how to control the styling of the jquery mobile data-filter?

Also, is anyone aware of someplace that I can find a complete listing with descriptions of what each item in the jquery mobile css controls? I've been looking and tinkering. i'm making headway. Just can't believe that it isn't published somewhere on the web. I'd like a full explanation. Haven't found one yet.

1
  • Did you already Inspect Element from Chrome or Firefox (firebug)? That should tell you what CSS is being applied and which element you need to apply it to.
    – shanabus
    Feb 27, 2012 at 2:56

3 Answers 3

3

I wouldn't change the classes. Overriding is easier.

Put your list inside a wrapper like so:

<div class="listWrap">
   <ul data-role="listview" data-filter="true">
     // list items
   </ul>
</div>

This will result in the following enhanced markup

<div class="listWrap">
   <form class="ui-listview-filter ui-bar-c ui-listview-filter-inset" role="search">
      // your filter
      <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
         // input
         <input placeholder="" data-type="search" class="ui-input-text ui-body-c">
         // close button
         <a title="clear text" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-input-clear-hidden" href="#" data-theme="c">
             <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">clear text</span>
                <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
             </span>
          </a>
      </div>
   </form>    
   <ul data-role="listview" data-filter="true">
     // list items
   </ul>
</div>

Now you can use CSS to override classes like so:

.listWrap _your_search_filter_class {  /* do something */ }

You could also relocate the listview filter altogether. To do this, in JQM looks for this line:

.appendTo( wrapper )

and replace it with this:

.appendTo( $('.ui-page-active .ui-filter-destination').length > 0 ? $('.ui-filter-destination') : wrapper )

Then give a class of .ui-filter-destination to an element container, which should include your filter and it will be removed from the top of the filter to the wrapper element you want.

1

No need to wrap list, just use "data-filter-theme"

<ul data-role="listview" data-filter="true" data-filter-placeholder="Custom filter text" data-filter-theme="b">
0

I've used what @Frequent suggested (except I did not wrap in another div) as well as @shanabus (looking through inspector). I'm using the data-theme="g" so my code to overide the css provided by themeroller is as follows:

form.ui-listview-filter.ui-bar-h.ui-listview-filter-inset { background:none!important; border:none!important;}

This worked for me to get rid of the annoying bg colour and make the form sit on any coloured background neatly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.