Jquery Mobile - Customizing the listview
In the examples on Basic Listviews that we have seen in the previous posts, you must have observed that the listview is sticking to the top of the screen. You will probably not have only the listview in your web application, but anyways you will have some divs before the listview and the listview will stick to the bottom of the div above it. Many a times, you would like to have some blank space between the div before the listview and the actual listview and this is the time when you would start over-riding the default Jquery Mobile CSS.
The example that we will be seeing today is a very basic example of using custom CSS to override the default JQuery Mobile CSS to suite our own web application or website.
As you can see in the result above, the listview has some margins around it. If you take a look at the CSS for this example, you will notice the following CSS.
.ui-listview{
margin: 30px 70px 0 !important;
}
As you can see, we have used !important to override the margins from the ui-listview JQM class. Doing this you can have your own styles applied to the default JQM controls.
Note: Overriding the entire JQM class is not advisable. This is because, doing so would affect that component; in our case the listview across the entire website or web application that you are working on. The right was of overriding the the JQM classes is by appending the JQM class by your own custom class or id.
Hope you can now start customizing your Jquery Mobile based websites with ease. Do leave a comment in case you have any doubts and I will be happy to answer them for you. Do hit the like button on Facebook to show your encouragement.
The example that we will be seeing today is a very basic example of using custom CSS to override the default JQuery Mobile CSS to suite our own web application or website.
As you can see in the result above, the listview has some margins around it. If you take a look at the CSS for this example, you will notice the following CSS.
.ui-listview{
margin: 30px 70px 0 !important;
}
As you can see, we have used !important to override the margins from the ui-listview JQM class. Doing this you can have your own styles applied to the default JQM controls.
Note: Overriding the entire JQM class is not advisable. This is because, doing so would affect that component; in our case the listview across the entire website or web application that you are working on. The right was of overriding the the JQM classes is by appending the JQM class by your own custom class or id.
Hope you can now start customizing your Jquery Mobile based websites with ease. Do leave a comment in case you have any doubts and I will be happy to answer them for you. Do hit the like button on Facebook to show your encouragement.
