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

Closed
rubenpenyafiel opened this Issue Jul 17, 2012 · 2 comments

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 17, 2012

Member

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; } ?

Member

jaspermdegroot commented Jul 17, 2012

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

This comment has been minimized.

Show comment
Hide comment
@rubenpenyafiel

rubenpenyafiel Jul 17, 2012

@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 :)

@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 :)

@ghost ghost assigned jaspermdegroot Jul 17, 2012

jaspermdegroot added a commit that referenced this issue Aug 3, 2012

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment