Creating a possibility to have horizontal forms in popups

[PhilippSoehnlein]

jquery.mobile.popup.css forces all forms in popups to be vertical forms (labels can not be in one line with the corresponding input fields):

@media all and (min-width: 28em){
    .ui-popup .ui-field-contain label.ui-submit,
    .ui-popup .ui-field-contain .ui-controlgroup-label,
    .ui-popup .ui-field-contain label.ui-select,
    .ui-popup .ui-field-contain label.ui-input-text {
        font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em;
    }
    .ui-popup .ui-field-contain .ui-btn.ui-submit,
    .ui-popup .ui-field-contain .ui-controlgroup-controls,
    .ui-popup .ui-field-contain .ui-select,
    .ui-popup .ui-field-contain input.ui-input-text,
    .ui-popup .ui-field-contain textarea.ui-input-text,
    .ui-popup .ui-field-contain .ui-input-search {
        width: 100%; display: block;
    }
}

It's understandable why this happens (IMO because it's very likely, that popups are not wide enough and we only have media queries that query for viewport size, but not for parent container width), but I miss a possibility to have horizontal forms anyway. If authors are sure, their horizontal forms will fit, why not giving them the possibilty?

My suggestion would be to have a data-attribute on fieldcontainers that ends up in an additional class on the fieldcontainer which doesn't apply the CSS rules from above.

An possible example:

<div data-role="popup">
    <form action="?" method="post">
        <div data-role=fieldcontain" data-type="horizontal">
            <label for="foo">Label:</label>
            <input type="text" id="foo" name="foo">
        </div>
    </form>
</div>

data-type="horizontal" would add a .ui-field-contain-horizontal class and the CSS only needs additional :not() selectors:

@media all and (min-width: 28em){
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) label.ui-submit,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) .ui-controlgroup-label,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) label.ui-select,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) label.ui-input-text {
        font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em;
    }
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) .ui-btn.ui-submit,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) .ui-controlgroup-controls,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) .ui-select,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) input.ui-input-text,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) textarea.ui-input-text,
    .ui-popup .ui-field-contain:not(.ui-field-contain-horizontal) .ui-input-search {
        width: 100%; display: block;
    }
}

What do you think? I would also be glad to help you out and submit a pull request if you people think the idea is good.

[jaspermdegroot]

@PhilippSoehnlein

Thanks for this suggestion. I agree it would be nice if we could leave this up to the developer.

Downside of your solution is that it uses JS to add a class, while we are actually working on reducing this in 1.4 to improve performance. Another problem is the :not() selector which isn't supported on IE8. Media queries aren't supported either on IE8, but when people use a polyfill like Respond.js they probably expect things to work.

What I have in mind for field containers is to do the responsiveness the other way around and use class ui-responsive, the same way as we do for responsive grids. The labels and form elements sit next to eachother by default and we use the following CSS to stack them at small screens:

@media (max-width: 28em) {
    .ui-responsive.ui-field-contain form-element-selector {
        width: 100%;
        display: block;
    }
}

Or maybe also .ui-responsive .ui-field-contain so you only have to add the ui-responsive class to the form container and not each field container in the form.

The rule to apply this at all viewport widths for field containers in popups can be done the same way. That would resolve the problem you described, because you can just omit class ui-responsive.
Using an opt-in class and doing it the other way around also makes it a lot easier if you want to use a different breakpoint. Obvious downside is that you have to add that class to your markup if you want things to stay the same as they are now.

@toddparker - We discussed this earlier (#5276). What do you think?

[jaspermdegroot]

Closing as feature request. We are going to update the roadmap. If we decide to implement the feature we will set a specific milestone. The ticket will be re-opened when we are going to work on implementing the feature.

[bjolseth]

is there an easy workaround for us that need this functionality now? certainly for the tablet pages I am making (in landascape mode) it makes no sense to stack the form elements vertically