How to reduce the size of Pick Applet in Mobile Open UI Application ?

The size of the pick applet is controlled in theme-black.css in the below style class:

.ui-simpledialog-container
{
 overflow:scroll !important;
 border-radius:10px;
 max-height: 85% !important;
 max-width: 95% !important;
}


The font size can be changed from theme-black.css in the following css:

.ui-li-heading {
 font-family: Helvetica Neue ;
 font-size: 19px; /*15pt;*/ /*100%; */
 font-weight: bold;
 display: block;
 margin: .5em 0 0 .4em;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
}

.ui-li-desc {
 font-family: Helvetica Neue ;
 font-size: 17px;
 font-weight: normal;
 display: block;
 margin: .6em;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 max-width: 90%;
}

.scrollviewcontainer {
 min-height: 55px;
 max-height: 310px;
}

.ui-simpledialog-container
{
 overflow:scroll !important;
 border-radius:10px;
 max-height: 65% !important;
 max-width: 45% !important;
}

 

The above tags controls the look of Pick Applet and its controls. Changing the parameters will give the desired results.

Tags