Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Controlgroup: Horizontal controlgroup shouldn't have margins in header #4713

Closed
rubenpenyafiel opened this Issue · 2 comments

2 participants

@rubenpenyafiel

If you have a horizontal controlgroup in the header, for example:

<div data-role="header">
    <h1>Title</h1>
    <div data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
        <a href="#" data-role="button">Button 1</a>
        <a href="#" data-role="button">Button 2</a>
    </div>
</div>

The controlgroup has absolute positioning because of the .ui-btn-right class, but also inherits a margin: 0.5em 0; causing the controlgroup to be at the bottom of the header.

Single buttons have margin: 0; when placed in the header, but controlgroups don't.

I fix it adding the following rule in https://github.com/jquery/jquery-mobile/blob/master/css/structure/jquery.mobile.controlgroup.css

.ui-header .ui-controlgroup { margin: 0; }

I haven't used .ui-controlgroup-horizontal because vertical controlgroups in headers wouldn't fit anyway, and removing its margin should do no harm.

@jaspermdegroot
Collaborator

hi @rubenpenyafiel

Thanks for posting!

I don't think ui-btn-right was intended to be used for something else than single buttons, but that doesn't mean we can't make it work :)
I suggest to focus on the ui-btn-right class instead of ui-controlgroup, because that is the class which sets the absolute positioning.
If you use a controlgroup in the header without adding ui-btn-right you probably do want some top and bottom margin. Actually I think we have to add some left/right margin as well, but that is something else.

What do you think about .ui-btn-left, .ui-btn-right { margin: 0 !important; } ?

@rubenpenyafiel

@uGoMobi

I know that its use may not be the standard, but I prefer a controlgroup instead of multiple buttons in the header, to make it more compact, especially if I have left buttons, right buttons and title.

Maybe there should be a common solution to position elements to right or left in the header, such as a data-something instead of a button related class, or maybe renaming the class. I'm not sure of it...

Anyway, your solution seems OK to me :)

@jaspermdegroot jaspermdegroot closed this issue from a commit
@jaspermdegroot jaspermdegroot Button: override default margin if controlgroups or form elements hav…
…e class ui-btn-left/right. Fixes #4713 - Controlgroup: Horizontal controlgroup shouldn't have margins in header.
82cf4d9
@jaspermdegroot jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot Button: override default margin if controlgroups or form elements hav…
…e class ui-btn-left/right. Fixes #4713 - Controlgroup: Horizontal controlgroup shouldn't have margins in header.
4754690
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.