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!