search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.7k stars 2.41k forks source link

dialog header needs left and right borders #2125

Closed alumni closed 12 years ago

alumni commented 12 years ago

The left and right borders are missing in the dialog header. The following CSS is applied to them:

.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer {
    ...
    border-left-width: 0; /* should be 1px for dialog headers */
    border-right-width: 0; /* should be 1px for dialog headers */
}

Maybe the following rule could be added to fix this:

.ui-dialog .ui-header {
    border-left-width: 1px;
    border-right-width: 1px;
}

Now, if the header has a navbar, we might want to make the navbar overlap the borders:

.ui-dialog .ui-header .ui-navbar {
    margin-left: -1px;
    margin-right: -1px;
    /* box-sizing: ??? might also be needed to fix the grid width percentages */
}
toddparker commented 12 years ago

This is by design, but you're welcome to tweak the styles as needed for your design. The side borders add visual clutter and waste space on small screens. iOS and other platforms follow this convention too.