Skip to content
This repository

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

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

2 participants

Rubèn Penyafiel Jasper de Groot
Rubèn Penyafiel

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.

Jasper de Groot
Owner

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

Rubèn Penyafiel

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

Jasper de Groot uGoMobi closed this issue from a commit August 03, 2012
Jasper de Groot 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
Jasper de Groot uGoMobi closed this in 82cf4d9 August 03, 2012
Jasper de Groot uGoMobi referenced this issue from a commit August 03, 2012
Jasper de Groot 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.