[SalesForce] lightning:select Formatting not like in Lightning UI

Anyone know how to get the <lightning:select> options to be formatted like they are supposed to be?

Simple example below placed in the right side gf the Account lightning page

Lightning App

<aura:component description="myExampleComponent" implements="flexipage:availableForAllPageTypes,force:hasRecordId"
                access="global">

    <lightning:select name="sel" label="try Me" >
        <option value="1">First</option>
        <option value="2">Second</option>
    </lightning:select>
</aura:component>

Result when in LEX and showing options:

When in the account and creating an opportunity using default SF LEX UI the StageName options look like this:

Is there any way to get the options for the <lightning:select> to appear like they do when using salesforce provided components? I would think that the lightning select options was supposed to be styled like the lightning select not just the select input.

Best Answer

I would expect components in the lightning namespace to match the LEX design in the future, even though we can't say when/if this will happen.

In the meantime, the guys at Appiphony have made a great job creating components that match the SLDS look & feel.

Have a look at the Strike components, in this case the Strike Select one, which is exactly what you want. These are free and open source. In the future, when lightning:select will be matching the LEX UI, you'll just have to replace the strike component by the standard one.

Related Solutions

[SalesForce] Can we use managed lightning component in lightning application

You can use managed lightning component in other lightning app.

There is an attribute named access which needs to be set. For ex:

<aura:component access="global" controller="KendoController" implements="forceCommunity:availableForAllPageTypes,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">

[SalesForce] lightning:select – Set default value based on sObject List from apex controller

Setting the options doesn't actually cause the rendering to happen. So, the value you're setting is ignored because it isn't valid at the time. The solution is to use another callback post-rendering. Here's an example app I wrote that demonstrates this:

<aura:application extends="force:slds" controller="LightningAccountController">
    <aura:attribute name="accounts" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:select label="Choose 1" name="a_opt" aura:id="a_opt" onchange="{!c.change}">
        <aura:iteration items="{!v.accounts}" var="account">
            <option value="{!account.Id}">{!account.Name}</option>
        </aura:iteration>
    </lightning:select>
</aura:application>

// Controller
({
    doInit: function(component, event, helper) {
        // Request from server
        var action = component.get("c.getAccountList");
        action.setCallback(this, function(result){
            var accounts = result.getReturnValue();
            console.log(accounts);
            component.set("v.accounts", accounts);
            // Let DOM state catch up.
            window.setTimeout(
                $A.getCallback( function() {
                    // Now set our preferred value
                    component.find("a_opt").set("v.value", accounts[4].Id);
                }));
        });
        $A.enqueueAction(action);
    }
})

// Apex class
global class LightningAccountController {
    @AuraEnabled global static Account[] getAccountList() {
        return [SELECT Name FROM Account LIMIT 10];
    }
}

Best Answer

Related Solutions

[SalesForce] Can we use managed lightning component in lightning application

[SalesForce] lightning:select – Set default value based on sObject List from apex controller

Related Topic