function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
smita bhargavasmita bhargava 

expand comboBox width in lightning component

I have a lightning comboBox as follows.

 <aura:attribute name="workBaskets" type="List" default="" description="Listing things in controller"/>

 <lightning:combobox name="workbasket" label="Work Basket"  value="{!v.workbasketName}" aura:id="workBasket" 
                                    class="priorityAlign" options="{!v.workBaskets}">

In the controller of the component I have as follows

 options.push({'label': 'WBI MDCR Rework Member', 'value': 'WBI_MDCR_Rework_Member'});
            options.push({'label': 'WB MDCR Rework Review Escalations', 'value': 'WB_MDCR_Rework_Review_Escalations'});
            options.push({'label': 'WBI MDCR StopPay', 'value': 'WBI_MDCR_StopPay'});
            options.push({'label': 'WBI MDCR Rework Provider', 'value': 'WBI_MDCR_Rework_Provider'});
            options.push({'label': 'WB MDCR DentalClaims', 'value': 'WB_MDCR_DentalClaims'});
            component.set("v.workBaskets",options);

.THIS .priorityAlign{
    margin-top: 25px;
  }


The ConboBox values are getting truncated when the conboxBox is loaded.

My requirement is to increase the width of the comboBox so the values do not appear truncated.

can we do this using slds class or using CSS?
Please let me know at the earliest with working code.
Like wise any CSS or slds class that will automatically increase the width of comboBox based on the value

Thanks
Smita
 
CalmSaintCalmSaint
Hi Smita, you can use below CSS for the width of combobox. You can use it either in the style tag or specifying this in the css file like this:
.THIS .priorityAlign{
    margin-top: 25px;
    width: 50px;
  }