You need to sign in to do that
Don't have an account?
Denise Crosby
need slds class to prevent field from expanding on lightning component
Hello.
My markup works ok on the desktop but when I test on mobile, the sitelookup field expands if I select an account with a long name. Then the screen becomes unusable (can't press the Save button or read the other fields. Is there an SLDS class to prevent a field from resizing to fit the selected name?
Thanks
Denise
My markup works ok on the desktop but when I test on mobile, the sitelookup field expands if I select an account with a long name. Then the screen becomes unusable (can't press the Save button or read the other fields. Is there an SLDS class to prevent a field from resizing to fit the selected name?
<lightning:layout > <lightning:layoutItem padding="around-small" size="{!v.screenSize}" class="slds-align_absolute-center"> <lightning:card iconName="standard:opportunity" title="New Opportunity"> <form class="slds-form--stacked"> <lightning:input aura:id="oppform" label="Opportunity Name" name="oppname" value="{!v.newOpp.Name}" required="true" class="slds-p-horizontal_x-small"/> <lightning:input type="number" aura:id="oppform" label="Revenue" name="revenue" value="{!v.newOpp.Amount}" required="true" class="slds-p-horizontal_x-small"/> <lightning:input type="date" aura:id="oppform" label="Estimated Close Date" name="closedate" value="{!v.newOpp.CloseDate}" required="true" class="slds-p-horizontal_x-small"/> <c:strike_lookup aura:id="sitelookup" value="{!v.siteID}" label="Site" object="Account" searchField="Name" placeholder="Select a site" iconName="standard:account" filter="{!v.filter}" order="Name" limit="5" loadingMessage="Loading..." errorMessage="Invalid input" class="slds-p-horizontal_x-small " required="true"/> <p> <div class="slds-p-horizontal_x-small" > <i><small> Enter a site. You may enter more sites after saving. Do not enter a contractor or EPC.</small></i></div></p> <br/> <c:strike_lookup aura:id="ownerlookup" value="{!v.newOpp.AccountId}" label="Owner" object="Account" searchField="Name" placeholder="Select an owner" iconName="standard:account" filter="type = 'owner'" order="Name" limit="5" loadingMessage="Loading..." errorMessage="Invalid input" class="slds-p-horizontal_x-small" required="true"/> <p> <div class="slds-p-horizontal_x-small" > <i><small> Site owner. Do not enter a contractor or EPC.</small></i></div></p> <br/> <c:strike_lookup aura:id="contractorlookup" value="{!v.contractorID}" label="Contractor" object="Account" searchField="Name" placeholder="Select a contractor" iconName="standard:account" filter="type = 'contractor'" order="Name" limit="5" loadingMessage="Loading..." errorMessage="Invalid input" class="slds-p-horizontal_x-small"/> <p> <div class="slds-p-horizontal_x-small" > <i><small> (Optional) CG or EPC. If bidding to multiple contractors, you may enter more contractors after saving.</small></i></div></p> <p> <div class="slds-text-color_error" > <ui:outputText value="{!v.Err}" /></div></p> <lightning:button label="Save" class="slds-m-around_small" variant="brand" onclick="{!c.clickCreate}"/> </form> </lightning:card> </lightning:layoutItem> </lightning:layout>
doInit: function(component) { var userAgent = navigator.userAgent || navigator.vendor || window.opera; if(userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) || userAgent.match( /Android/i )) { component.set("v.screenSize", 12); } else component.set("v.screenSize", 6); },
Thanks
Denise
All Answers