You need to sign in to do that
Don't have an account?
Prasad 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:
DuelListController.js
and here is the output I am getting:
Could you please help me with the same?
Regards,
Prasad
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:
Could you please help me with the same?
Regards,
Prasad
Please add "extends="force:slds" this in your app and it will fix your issue.
Thanks
Hemant
All Answers
Please add "extends="force:slds" this in your app and it will fix your issue.
Thanks
Hemant
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:
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