+ Start a Discussion
Prasad Kulkarni 53Prasad Kulkarni 53 

duellistbox: Formatting

Hi,

I am beginner in lightning.
Trying to implement DuelListBox and getting formatting issues with same.
Here is the code I am using:
DuelListComponent.cmp:
<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="listOptions" type="List" default="[]"/>
    <aura:attribute name="defaultOptions" type="List" default="[]"/>
    <aura:attribute name="requiredOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
    <lightning:dualListbox aura:id="selectOptions" name="Select Options"  label= "Select Options"
                           sourceLabel="Available Options"
                           selectedLabel="Selected Options"
                           options="{! v.listOptions }"
                           value="{! v.defaultOptions }"
                           requiredOptions="{! v.requiredOptions }"
                           onchange="{! c.handleChange }"/>
</aura:component>

DuelListController.js​​​​​​​
/** Client-Side Controller **/
({
    initialize: function (component, event, helper) {
        var options = [
            { value: "1", label: "Option 1" },
            { value: "2", label: "Option 2" },
            { value: "3", label: "Option 3" },
            { value: "4", label: "Option 4" },
            { value: "5", label: "Option 5" },
            { value: "6", label: "Option 6" },
            { value: "7", label: "Option 7" },
            { value: "8", label: "Option 8" },
        ];
        var values = ["7", "2", "3"];
        var required = ["2", "7"];
        component.set("v.listOptions", options);
        component.set("v.defaultOptions", values);
        component.set("v.requiredOptions", required);
    },
    handleChange: function (cmp, event) {
        // Get the list of the "value" attribute on all the selected options
        var selectedOptionsList = event.getParam("value");
        alert("Options selected: '" + selectedOptionsList + "'");
    }
})

and here is the output I am getting:

User-added imageCould you please help me with the same?

Regards,
Prasad
Best Answer chosen by Prasad Kulkarni 53
Hemant_SoniHemant_Soni
Hi Prasad,
Please add "extends="force:slds" this in your app and it will fix your issue.

Thanks
Hemant

All Answers

Hemant_SoniHemant_Soni
Hi Prasad,
Please add "extends="force:slds" this in your app and it will fix your issue.

Thanks
Hemant
This was selected as the best answer
Khan AnasKhan Anas (Salesforce Developers) 
Hi Prasad,

Greetings to you!

You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds:
<aura:application extends="force:slds">
    <c:DuelListComponent />
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas