As I mentioned in my older posts, I'm really on web-based mobile tablet project for our existing project. Honestly, this web-based mobile tablet project is our first mobile project for our company. That's why all of requirements are so high and trying to got impressive from our clients. Among them, they urged me to create square shape button in jQueryMobile instead of existing them. As we all know, the existing stylesheet coding of jQueryMobile is very unit, thick and complex and if you change something in it, the impact will be so high. That's why I don't want to change anything in it except theme creating but they want square shape so no choice.

So, I've changed the following coding like that.

view plain print about
1<!--- line 1413 --->
2
3.ui-btn-inner {
4    padding: 2em;
5    display: block;
6    height: 100%;
7    text-overflow: ellipsis;
8    overflow: hidden;
9    white-space: nowrap;
10    position: relative;
11}

After changing it so and rendered it, I've got the odd outcome. Please see the image. Because it changes to all of input like drop down, checkbox and radio.

That's why I must need to set the original style for drop down, checkbox and radio. So, I've added the following coding into existing stylesheet of jQueryMobile.

view plain print about
1<!--- add it after .ui-select --->
2.ui-select .ui-btn-inner {padding: .6em;}
3
4<!--- add it after .ui-checkbox --->
5.ui-checkbox .ui-btn-inner {padding: .6em;}

After adding about two lines into existing stylesheet of jQuerymobile and rendering it, I've got the outcome what our client want as follow.

Hope it will be useful for anyone who is trying to create square shape button in jQuerymobile.

This entry was posted on May 17, 2011 at 2:45 AM and has received 4569 views. There are currently 0 comments. Print this entry.