[SalesForce] Picklist field does not show dropdown arrow with the force:inputField tag

Working on a form that needs to get an user's input on a picklist field. I am using the force:inputField tag to bind the input field. But the physical look of the picklist field is a little off. See the screenshot1 and screenshot2 and my code below: 

 <div class="slds-form-element">              
     <label class="slds-form-element__label" for="showAs">Show Time As: </label>
     <div class="slds-form-element__control slds-combobox-picklist"> 
         <force:inputField value="{!v.newEvent.ShowAs}" required="true"/>                            
     </div>
 </div>

What I want the input field to look like is this. This example uses the select tag with the select class="slds-select" and the picklist values are specified in between the option tags. Here are the codes:

<div class="slds-form-element">
    <label class="slds-form-element__label" for="select-01">Select Label</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <select class="slds-select" id="select-01">
                <option value="">Please select</option>
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </select>
        </div>
    </div>
</div>

I want to be able to see the dropdown arrow and click on it to select the picklist value. Anyone here know how this can be done using the force:inputField tag?

Best Answer

You can use lightning:select to achieve this. lightning:select comes with in-build slds applied to it. Hence you don't need to worry about the css. And it's simple to use.

Related Topic