Hello,
I'm using the lightning:dualListbox component, as described here: https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example

I'm having troubles to adjust the height. My issue is that the number of items is limited (4), so it doesn't look nice:


My question is: how I can reduce the white part (red arrow on the image)?

Code is like:

<aura:component>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' }]"/>

    <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>

</aura:component>

Thank you!

I have a requirement where I need to do the below steps
1) fetch data for dualist box and display from the database
2) the user can change the value
3) save the change value back to the database

 <lightning:dualListbox  label="Some field" name="some name" 
                       sourceLabel="Available"
                       selectedLabel="Chosen"
                       options="{!v.options}"
                       onchange="{!c.handleChange}"
                       size="20"

 <lightning:dualListbox  label="Some field" name="some name" 
                       sourceLabel="Available"
                       selectedLabel="Chosen"
                       options="{!v.options}"
                       onchange="{!c.handleChange}"
                       size="20"

Hello,
 
i am facing an error with a lightning component since this weekend. I can't figure out why this message occures

Uncaught Uncaught error in markup://aura:valueChange [Cannot read property 'config' of undefined]

CMP

<aura:component  controller="CtrlBtnCloseCase" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <aura:attribute name="recordId" type="Id" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recordTypeId" type="Id" />
    <aura:attribute name="case" type="Case" default="{ 'sobjectType': 'Case'}"/>
    <aura:attribute name="toMail" type="Boolean" default="false"/>
    <aura:attribute name="errorMessage" type="String"/>
    <aura:attribute name="listReason" type="String" default= "[]"/>
    <aura:attribute name="listSkillsOptions1" type="List" default="[]"/>
    <aura:attribute name="reason" type="String"/>
    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <div class="slds-form-element" aura:id="main">
        <lightning:recordEditForm aura:id="salesOpsRecordCreate"
                                  recordTypeId="{!v.recordTypeId}"
                                  objectApiName="Case">
        <div class="slds-form-element__row">
            <div class="slds-form-element">
                <ui:inputSelect label="{!$Label.c.CloseCaseModalStatus}" class="dynamic" aura:id="InputSelectDynamic" value="{!v.case.Status}" required="true"/>
            </div>
           <!--<div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputSelect value="{!v.listReason}" class="dynamic" aura:id="caseReason" label="{!$Label.c.CloseCaseModalReason}" updateOn="change" />                    
                </div>
            
            </div>-->
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:inputField fieldName="Reason" aura:id="caseReason" required="true" class="customRequired" onchange="{!c.getCaseValue}" value="{!v.reason}" selected="{!v.reason}"/>                    
                </div>
            
            </div>
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputText value="{!v.case.Comments}" aura:id="caseComment" label="{!$Label.c.CloseCaseModalComment}" updateOn="change"/>                    
                </div>
            </div>
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputCheckbox value="{!v.case.Send_Closure_Email__c}" aura:id="caseSendMail" label="{!$Label.c.CloseCaseModalSendmail}"/>                    
                </div>
            </div>
            <div class="slds-form-element">
                <br/>
                <lightning:button class="slds-button slds-button_brand" aura:id="editDataButton" label="{!$Label.c.CloseCaseModalSaveBtn}" onclick="{!c.doSaveCase}"/>
                <lightning:button class="slds-button slds-button_neutral" aura:id="cancelButton" label="{!$Label.c.CloseCaseModalCancelBtnl}" onclick="{!c.doCancel}"/>
            </div>
            <br/>
            <div class="slds-form-element">
                <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info slds-hide" role="alert" aura:id="alertContainer">
                    <ui:outputText value="{!v.errorMessage}" aura:id="caseError" class="none" />                    
                </div>
            </div>
        </div>
        </lightning:recordEditForm>
    </div>
</aura:component>

CONTROLLER
 

({
    doInit : function(component, event, helper) {
        try{
            console.log(event);
            console.log(component);
            var action = component.get("c.getStatus");
            var inputsel = component.find("InputSelectDynamic");
            var reasonSel = component.find("caseReason");
            var optsStatus=[];
            var optsReason=[];
            optsReason.push({"class": "optionClass", label: '', value: ''});
            var getCase = component.get("c.getCurrentCase");
            console.log(component.get("v.recordId"));
            getCase.setParams({CaseId : component.get("v.recordId")});
            getCase.setCallback(this, function(ab) {
                component.set("v.case", ab.getReturnValue());
                
                if(ab.getReturnValue()['Status'] == 'Closed'){
                    var modal = component.find('main');
                    $A.util.toggleClass(modal,'slds-hide');
                }
                
                else{
                    action.setCallback(this, function(a) {
                        for(var i=0;i< a.getReturnValue().length;i++){
                            
                            if(ab.getReturnValue()['RecordType']['DeveloperName'].search("AC_Engine") > -1 && (a.getReturnValue()[i].search("Approved") > -1 || a.getReturnValue()[i].search("Rejected") > -1)){
                                optsStatus.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
                            }
                            else if (ab.getReturnValue()['RecordType']['DeveloperName'].search("AC_Engine") < 0 && a.getReturnValue()[i].search("Closed") > -1 && (a.getReturnValue()[i].search("Approved") < 0 && a.getReturnValue()[i].search("Rejected") < 0&& a.getReturnValue()[i].search("Pending") < 0)){
                                optsStatus.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
                            }
                            
                            /*else if(ab.getReturnValue()['RecordType']['DeveloperName'].search("Support") > -1 && (a.getReturnValue()[i].search("Approved") < 0 || a.getReturnValue()[i].search("Rejected") < 0)){
                            opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
                        }
                            else if(ab.getReturnValue()['RecordType']['DeveloperName'].search("Support") > -1 && (a.getReturnValue()[i].search("Approved") < 0 || a.getReturnValue()[i].search("Rejected") < 0)){
                                opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
                            }*/
                            
                            inputsel.set("v.options", optsStatus);
                            
                        }
                        var reason = component.get("c.getReason");
                        console.log("22", component.get('v.recordTypeId'));
                        component.get('v.recordTypeId');
                        //reason.setParams({eId: component.get('v.recordId')});
                        reason.setCallback(this, function(reason) {
                            
                            for(var j=0;j< reason.getReturnValue().length;j++){
                                optsReason.push({"class": "optionClass", label: reason.getReturnValue()[j], value: reason.getReturnValue()[j]});
                            }
                            component.set("v.listReason", optsReason);
                            //reasonSel.set("v.options", optsReason);
                            console.log(optsReason);
                        });
                        $A.enqueueAction(reason);
                        //$A.enqueueAction(getCase);
                        console.log(optsStatus);
                    });
                    
                    $A.enqueueAction(action);
                }
                console.log(optsStatus);
            });
            $A.enqueueAction(getCase);
            
        }catch (e){
            console.log(e);
        }
    },
    doSaveCase : function(component, event, helper) {
        var reasonOk = false;
        
        var saveAction = component.get("c.saveCurrentCase");
        
        //console.log(component.get('v.case'));
        if(component.get('v.case.Comments') === undefined){
            component.set('v.case.Comments', '');
        }else{
            //console.log('comment ok', component.get('v.case.Comments'));
        }
        
        var reasonSel = component.find("caseReason");
        
        if(component.get("v.reason") === undefined || component.get("v.reason") == null || component.get("v.reason") == ''){
            $A.util.removeClass(component.find("caseError"), "none");
            var cmpTarget = component.find('alertContainer');
            $A.util.removeClass(cmpTarget, 'slds-hide');
            component.set('v.errorMessage', $A.get('$Label.c.LtngCloseCaseBtnNoReason')); 
        }else{
            reasonOk= true;
        }
        if(component.get('v.case.Send_Closure_Email__c') === undefined){
            //console.log("Send_Closure_Email__c", component.get('v.case.Send_Closure_Email__c'));
            component.set('v.case.Send_Closure_Email__c', false);
        }else{
            //console.log('Send_Closure_Email__c ok', component.get('v.case.Send_Closure_Email__c'));
        }
        
        if(reasonOk == true){
            saveAction.setParams({ CaseId : component.get("v.recordId"), comment: component.get('v.case.Comments'), status: component.find('InputSelectDynamic').get('v.value'), sendMail: component.get('v.case.Send_Closure_Email__c'), reason: reasonSel.get('v.value')});
            saveAction.setCallback(this, function(ab) {
                if(ab.getState() === "SUCCESS") {
                    //console.log("Case ", ab.getReturnValue());
                    component.find("overlayLib").notifyClose();
                    $A.get('e.force:refreshView').fire();
                    
                }
                else if(ab.getState() === "ERROR"){
                    
                    //let errorData = JSON.parse(error.message);
                    var errors = saveAction.getError();
                    var errorField = component.find('caseError');
                    //console.log(errors[0].pageErrors[0].message);
                    var cmpTarget = component.find('alertContainer');
                    $A.util.removeClass(cmpTarget, 'slds-hide');
                    component.set('v.errorMessage', errors[0].pageErrors[0].message);
                }
            });
            //console.log("click");
            $A.enqueueAction(saveAction);
        }
    },
    
    doSetStatus : function(component, event, helper){
        try{
        var getCase = component.get("c.getCase");
        getCase.setParams({ CaseId : cmp.get("v.recordId")});
        getCase.setCallback(this, function(a) {
            component.set("v.case", a.getReturnValue());
            
        });
        
        $A.enqueueAction(getCase);
        
        }catch (e){
            console.log(e);
        }
    },
    doCancel : function(component, event, helper){
        
        component.find("overlayLib").notifyClose();
        $A.get('e.force:refreshView').fire();
        $A.get("e.force:closeQuickAction").fire();
    },
    
    getCaseValue: function(component, event, helper) {
        
        console.log(event.getParam('value'));
        try{
            if(event.getParam('value') != undefined || event.getParam('value') =='' || event.getParam('value') ==null){
                component.set("v.reason", event.getParam('value'));
                component.set("v.case.Reason", event.getParam('value'));
            }
        }
        catch (e){
            console.log(e);
        }
    }
    
})

I do call this property anywhere.

Can someone help me?

thanks!
Peter


 

Hello,
I'm using the lightning:dualListbox component, as described here: https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example

I'm having troubles to adjust the height. My issue is that the number of items is limited (4), so it doesn't look nice:


My question is: how I can reduce the white part (red arrow on the image)?

Code is like:

<aura:component>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' }]"/>

    <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>

</aura:component>

Thank you!