+ Start a Discussion
Denise CrosbyDenise 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?
<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
Best Answer chosen by Denise Crosby
Denise CrosbyDenise Crosby
Update: I created another lightning component with just the sitelookup component with no sizing specified, and the field is not expanding automatically when I select an account with a long name on a mobile device. I am going to try recreating my original component without the lightning:layout and lightning:layoutitem.
 
<aura:component implements="flexipage:availableForAllPageTypes,lightning:actionOverride" access="global" >>
    
    <aura:attribute name="siteID" type="string"/>
    
    <lightning:card iconName="standard:opportunity" title="New Opportunity">
        <form class="slds-form_stacked ">         
            
            <c:strike_lookup aura:id="sitelookup"                                     
                             value="{!v.siteID}"
                             label="Site"
                             object="Account"
                             searchField="Name"
                             placeholder="Select a site"
                             iconName="standard:account"
                             filter="type = 'site' "
                             order="Name"
                             limit="5"
                             loadingMessage="Loading..."
                             errorMessage="Invalid input"
                             class="slds-p-horizontal_x-small "
                             required="true"/>
            
            <lightning:button label="Save"
                              class="slds-m-around_small"
                              variant="brand"
                              onclick="{!c.clickCreate}"/>
        </form>
    </lightning:card>
    
</aura:component>

 

All Answers

Denise CrosbyDenise Crosby
Update: I created another lightning component with just the sitelookup component with no sizing specified, and the field is not expanding automatically when I select an account with a long name on a mobile device. I am going to try recreating my original component without the lightning:layout and lightning:layoutitem.
 
<aura:component implements="flexipage:availableForAllPageTypes,lightning:actionOverride" access="global" >>
    
    <aura:attribute name="siteID" type="string"/>
    
    <lightning:card iconName="standard:opportunity" title="New Opportunity">
        <form class="slds-form_stacked ">         
            
            <c:strike_lookup aura:id="sitelookup"                                     
                             value="{!v.siteID}"
                             label="Site"
                             object="Account"
                             searchField="Name"
                             placeholder="Select a site"
                             iconName="standard:account"
                             filter="type = 'site' "
                             order="Name"
                             limit="5"
                             loadingMessage="Loading..."
                             errorMessage="Invalid input"
                             class="slds-p-horizontal_x-small "
                             required="true"/>
            
            <lightning:button label="Save"
                              class="slds-m-around_small"
                              variant="brand"
                              onclick="{!c.clickCreate}"/>
        </form>
    </lightning:card>
    
</aura:component>

 
This was selected as the best answer
Denise CrosbyDenise Crosby
I am going to use my code without the lightning:layout and lightning:layoutItem. lightning:layout and lightning:layoutItem made the form look nice on the desktop, since I could center it and it was a smaller form that didn't take up the entire width of the screen. Oh well, I don't know how else to do it.