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!
Best Answer
You can override the default class "slds-form--inline" you are using. This is the current class:
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: