
When develop a magento mobile theme with jQuery Mobile, I meet a problem what I think it ‘s good to share here. That ‘s the full width base on percent of popup. Let ‘s get an example I have a popup html like this.

<!-- login form html --> <div data-dismissible='false' data-role="popup" id="login_window" class="ui-content" data-overlay-theme="b" data-theme="none" data-corners="false" data-shadow="false"> <form> <div class="mb-popup-form"> <label for="email" class="ui-hidden-accessible">Email:</label> <input class="input_text" type="text" name="email" value="" placeholder="Email" data-theme="a"> <label for="pw" class="ui-hidden-accessible">Password:</label> <input class="input_text" type="password" name="pass" id="pw" value="" placeholder="Password" data-theme="a"> <button type="submit" class="ui-btn ui-corner-all ui-shadow">Login</button> <button type="button" class="ui-btn ui-corner-all ui-shadow" onclick="$( '#login_window' ).popup( 'close' );">Cancel</button> </div> </form> </div>
This code of javascript can show the popup
$("#login_window").popup(); $("#login_window").popup("open", {transition: 'slidedown'});
And what is the problem? The problem is the width of text box is too small, I want it should be 90% or something like that. In this case, we just need to style for id “login_window” like this:
#login_window-popup{ width: 100%; }
It will solve your problem. Now try and see the magic.
Magento jQuery Mobile Popup with full size in percent.amazing stuff.