How to force inline form and label on mobile device?

Question

I am working on a series of two forms in Lightning with corresponding labels (one is a drop down, the other is default text input). In desktop, they are displayed inline, [label] [form] [label] [form] using such:

                <div class="slds-form--inline">
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="blahhh">Label 1</label>
                        <div class="slds-form-element__control">
                            <ui:inputSelect aura:id="blahh" class="slds-select" change="{!c.controllerstuff}"/>
                        </div>
                    </div>
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="blahh">label 2</label>
                        <div class="slds-form-element__control">
                            <c:myComp type="Account" value="{!v.id}" className="slds-input" placeHolder="blah"/>
                        </div>
                    </div>
                </div>

On a mobile device, it breaks the labels from the input form, so each label is on a new line as well as each input form. Is there an elegant, Salesforce way to make this inline. It seems as though the:

slds-form--inline

class breaks in small spaces, but there is technically enough enough space to show it all together if I wanted.

Thanks!

Answer 1

You can override the default class "slds-form--inline" you are using. This is the current class:

@media (min-width: 30em){
.slds-form--inline .slds-form-element, .slds-form--inline .slds-form-element__control, .slds-form--inline .slds-form-element__label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}
}

@media (min-width: 30em){
.slds-form--inline .slds-form-element {
    margin-right: .5rem;
}

}

As you can see, if the size of the window is smaller than 30em, the class is not applied anymore.

If you want to change it, you can override the min-width like this:

@media (min-width: 15em){
    .slds-form--inline .slds-form-element, .slds-form--inline .slds-form-element__control, .slds-form--inline .slds-form-element__label {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }
    }

    @media (min-width: 15em){
    .slds-form--inline .slds-form-element {
        margin-right: .5rem;
    }

    }