1

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!

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

    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.