twitter/bootstrap — Issue #511: Tweaks for modals on mobile/Android
Author: pamelafox
Created: 2011-10-31 00:48:38+00:00
State: open

I'm using modal dialog in an Android Phonegap app, and had to make a few adjustments. Perhaps these can be incorporated or useful somehow.

First, I made a small modal which was half the size by manually overriding the width/margin. There's probably a better more generic way.

Then, I found it was quite hard to click the "x" in Android browser, so I gave the X as much padding as I could and still have it look the same.

My CSS:

.modal {
width: 280px;
margin: -140px 0 0 -140px;
.modal-header {
padding: 0px;
.close {
margin-top: 0px;
padding-top: 10px;
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}
h3 {
padding-left: 10px;
}
}