LWC standard Combobox css issue

I m facing issue in lightning-combobox ui, picklists are not aligned properly and unable to identify the drop down fields:

Generally when we use lightning-combobox, field display dropdown but in my case display as normal text but when I click on field then options are coming properly, also trying add css but not working, can somebody help me on this?, thank you!!

<template> <div class="slds-box slds-theme_default" style="width:100%;"> <!-- Global saving/loading spinner --> <template if:true={isLoading}> <div class="containerCls"> <!-- Sales Table Start--> <lightning-accordion class="accordion-style" allow-multiple-sections-open active-section-name={activeSections}> <lightning-accordion-section name="Table1" label="Table1" class="accordion-section"> <div class="tableContainer"> <table class="slds-table sales-table" role="grid"> <thead> <tr class="headerRow"> <th scope="col" style="width:28px;" class="col-select"> <!-- When it's Sales opportunity (non Auto/ICT), hide the Selection column header checkbox.--> <template if:true={showSalesHeaderCheckbox}> <input type="checkbox" title="Select all" checked={selectAllSales} onchange={handleSelectAllSales} /> </template> <template if:false={showSalesHeaderCheckbox}> <div class="header-placeholder"></div> </template> </th> <!-- Actions column --> <th scope="col" style="width:28px;padding-bottom: 6px !important;"> <lightning-button-icon icon-name={expandAllSalesIcon} alternative-text={expandAllSalesAlt} onclick={handleExpandAllSales} class="btn-icon" size="xx-small"></lightning-button-icon> </th> <th scope="col">Delete</th> <!-- Dynamic headers --> <template for:each={salesColumns} for:item="col"> <th key={col.fieldName} scope="col" class="col-label"> <span class="slds-truncate slds-grid slds-has-flexi-truncate slds-align_absolute-center" title={col.label}>{col.label}</span> <template if:true={col.helpText}> <lightning-helptext content={col.helpText} style="margin-left: 7px;"></lightning-helptext> </template> </th> </template> </tr> </thead> <tbody class="table-body"> <template for:each={pagedSalesRows} for:item="row"> <tr key={row.id} class={row.rowClass} style="border-bottom: 2px solid rgb(227, 222, 184)"> <td class="col-select"> <template if:true={showSalesCheckbox}> <input type="checkbox" data-id={row.id} data-table="sales" checked={row.selected} onchange={handleRowSelect}/> </template> <template if:false={showSalesHeaderCheckbox}> <div class="header-placeholder"></div> </template> </td> <td class="col-actions"> <img src={iconExpand} class={row.expandClass} data-id={row.id} onclick={toggleExpandSales} alt="Expand"/> <img src={iconCollapse} class={row.collapseClass} data-rowid={row.id} onclick={toggleExpandSales} alt="Collapse"/> </td> <td style="width:12px;"> <img src="/resource/1336577126000/iconDelete" onclick={handleDeleteSales} data-rowid={row.id} style="border:0px"/> </td> </tr> <template if:true={row.isExpanded}> <tr key={row.id_expanded}> <td colspan={salesExpandedColSpan} class="detail-cell"> <div class="expanded-panel slds-p-around_small"> <div class="detail-grid-2col"> <template for:each={row.salesDetailFields} for:item="df"> <template if:true={df._visible}> <div key={df.key} class="detail-item slds-form-element slds-form-element_horizontal"> <div class="detail-field"> <div class="slds-form-element__label detail-label" > {df.label} </div> <div class="slds-form-element__control detail-input"> <!-- Detail read-only rendering mirrors main grid when page is read-only --> <template if:true={isReadOnly}> <div class="readonly-value"> {df.value} </div> </template> <!-- Editable detail controls when not read-only --> <template if:true={df.isPicklist}> <template if:false={df.isReadOnly}> <div> <lightning-combobox value={df.value} options={df.options} disabled={df.disabled} data-rowid={row.id} data-field={df.key} data-table="sales" required={df.isRequired} onchange={handleDetailFieldChange} > </lightning-combobox> </div> </template> </template> </div> </div> </div> </template> </template> </div> </div> </td> </tr> </template> </template> </tbody> </table> </div> </lightning-accordion-section> </lightning-accordion> </div> </div> </template> </div> </template> .containerCls{margin-top:0px;} .slds-template_default{ background-color: white; } .s1FixedTop { z-index: 999 !important; } .loading-overlay { position: fixed; z-index: 999; /* Ensure it's on top of everything */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */ display: flex; align-items: center; /* Vertical center */ justify-content: center; /* Horizontal center */ } .tableContainer{ font-size: 12px; vertical-align: middle; width: 100%; overflow-x: auto; } .sales-table thead th .slds-align_absolute-center, .prop-table thead th .slds-align_absolute-center { justify-content: center; text-align: center; } .sales-table thead th .slds-truncate, .prop-table thead th .slds-truncate { line-height: 16px !important; display: inline-block; vertical-align: middle; border-bottom: 1px dotted var(--slds-g-color-border-weak, #dddbda); } .sales-table thead .btn-icon, .prop-table thead .btn-icon { padding: 0 !important; margin: 0 !important; line-height: 16px !important; height: 16px !important; } .sales-table{ margin-top: 7px; width: 100%; /* table-layout: fixed; */ border-collapse: separate; border-spacing: 0; border-radius: 0; } .sales-table thead tr.headerRow, .prop-table thead tr.headerRow { height: 30px !important; } lightning-helptext > :first-child{ padding: 0px !important; } .sales-table thead th, .prop-table thead th{ background: linear-gradient(#eaf6ff, #cfe8f5); font-size: 10px; color: #16325c; font-weight: 700; border-bottom: 1px solid #cccccc; border-right: 1px solid #e1e4e6; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-overflow: ellipsis; overflow: visible; } /* lightning-combobox{ --slds-c-input-radius-border: 0px; --slds-c-input-color-border: black; } */ .col-select { text-align: center; } .col-actions { width: 3px; text-align: center; } .col-delete { text-align: center;font-size: 11px;} /* Center checkbox cells (header and body) horizontally & vertically */ .sales-table th.col-select, .sales-table td.col-select, .prop-table th:first-child, .prop-table td:first-child { text-align: center; vertical-align: middle; padding: 0; } .sales-table th.col-select > *, .sales-table td.col-select > *, .prop-table th:first-child > *, .prop-table td:first-child > * { display: inline-flex; align-items: center; justify-content: center; height: 100%; } .rev-col{ border: 2px solid black; background-color: white !important; border-radius: 0px; height: 1.5rem; font-size: 13px; width: auto; padding-left: 0.5rem; appearance: auto !important; } .text-col{ font-size: 13px; } .text-input{ /* width: 50px; */ text-align: left !important; font-size: 13px; padding-top: 0.5rem; } .sales-table input[type="checkbox"], .prop-table input[type="checkbox"] { margin: 0; } .sales-table input[type=number], .prop-table input[type=number]{ width: 6rem; border: 2px solid black; font-size: 13px; } .sales-table input[type=date] { text-align: left !important; width: 120px !important; border: 2px solid black; border-radius: 0; } .prop-table input[type=date]{ text-align: left !important; width: 120px !important; border: 2px solid black; border-radius: 0; } .recordpicker-icon { position: relative; } /* Change internal search icon color */ .recordpicker-icon lightning-record-picker { --lwc-colorTextIconDefault: #706e6b; --slds-c-icon-color-foreground-default: #706e6b; } /* Ensure input spacing stays correct */ .recordpicker-icon lightning-record-picker { --slds-c-input-spacing-horizontal-end: 2.5rem; } .recordPick-icon{ position: absolute; right: 0.65rem; bottom: 0.55rem; pointer-events: none; z-index: 10; --lwc-colorTextIconDefault: #706e6b; --slds-c-icon-color-foreground: orange; } /* .sales-table input[type=date]{ background-color: transparent !important; } .date-class input{ background-color: white !important; } */ /* .date-class .slds-input{ background-color: white !important; } */ .lookup-class{ width: fit-content; } .lookup-detail[type=search], .sales-table input[type=search], .prop-table input[type=search]{ width: 7.75rem; border: 2px solid black; font-size: 13px; } .sales-table input[type=text], .prop-table input[type=text] { width: 7.75rem; border: 2px solid black; font-size: 13px; } .lookup-inline_input{ width: 5.75rem !important; border: 2px solid black; text-align: center !important; } .gpl-input{width: 3.50rem !important; } .custom-icon{ --slds-c-icon-color-foreground-default: black; /* Changes utility icon color */ --slds-c-icon-color-background: white; /* For action/custom icons */ } /* Allow input fields, comboboxes and lookups to have proper width in cells */ /* .sales-table td, .prop-table td { text-align:center; justify-content: center; box-sizing: border-box; overflow: visible; text-overflow: ellipsis; white-space: nowrap; } */ /* Ensure comboboxes in table cells have proper width */ /* .sales-table .slds-combobox, .prop-table .slds-combobox { width: 100%; box-sizing: border-box; } */ .lookup-inline__icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); /* Compact the icon padding for a tight look */ --slds-c-button-icon-spacing-inline-start: 0; --slds-c-button-icon-spacing-inline-end: 0; } /* Ensure lookup containers have proper width */ .lookup-icons { width: 100%; box-sizing: border-box; } .lookup-input{margin-top: -25px;} .prop-table{ margin-top: 7px; width: 100%; /* table-layout: fixed; */ border-collapse: separate; border-spacing: 0; border-radius: 0; } .warning-section{ margin-top:-11px; } .disable-link{ pointer-events: none; color: grey; cursor: default; } .Opp-Detail{ font-size: 11.5px; background-color:#0084c9; color:white; font-weight: 600; margin-top: -8px; } .slds-card{ --slds-c-card-color-background: #f7f7f7; width: 100%; border-top: 3px solid #005b99 !important; border-bottom: 1px solid #eaeaea !important; border-left: 1px solid #eaeaea !important; border-right: 1px solid #eaeaea !important; --slds-c-card-radius-border:4px; --slds-c-card-sizing-border:3px; } .logoClass{ margin-top: -34px; margin-left: 35px; margin-bottom: -4px; font-size: 9px; } .headClass{ margin-left: 35px; font-size: 18px; margin-bottom: 20px; margin-top: -6px; } .logoIcon{margin-left: 2px;} hr { margin-top: 10px; border: 0; border-top: 1px solid #d8d8d8; } .top-row{ display: flex; align-items: center; gap:12px; width: 100%; flex-wrap: nowrap; font-size: 12px; } .comboCls{ margin-left: 106px; font-size: 12px; width: 3.5rem; max-width: 100%; } .top-left{ display: flex; align-items: center; gap:10px; flex-shrink: 0; } /*.slds-button{padding:2px;margin-top:2px;}*/ .buttonClass{ --slds-c-button-line-height: 1.0rem; --slds-c-button-color-background:#fafafa; --slds-c-button-text-color:black; --slds-c-button-text-font-weight:700; font-size: 11px; } .pagiBtn{ width:65px; text-align: center; justify-content: center; align-items: center; display: inline-flex; border-width:1px; line-height:1.875rem; height: 1.875rem; padding: 0 1rem; color:#0176d3; background-color:white; border:1px solid #747474; border-radius: .25rem; } .pagiBtn:hover,.pagiBtn:focus-visible{ background-color: #f3f3f3; border-color: #747474; outline: none; } .pagiBtn:disabled { background-color: #f3f3f3; color: #3e3e3c; border-color: #c9c9c9; cursor: not-allowed; opacity: 1; box-shadow: none; } .pagiBtn:disabled:hover, .pagiBtn:disabled:focus, .pagiBtn[disabled]:hover, .pagiBtn[disabled]:focus { background-color: #f3f3f3; border-color: #c9c9c9; color: #3e3e3c; } .part-list-heading { margin-bottom: 2px!important; } .part-list-title{ font-size: 14px; font-weight: 600; margin-bottom:4px; display: inline-block; } .action-bar{ display: flex; align-items: center; gap:10px; margin-bottom: 6px; } .action-row { align-items: center; gap: 6px; } .align-row { align-items: center; gap:6px; } .custom-combo { /*margin-right: 4px;*/ left: 18px; align-items: center; } .accordion-style{ --slds-c-accordion-heading-font-weight: 700; --slds-c-accordion-heading-color:white; --slds-c-accordion-heading-text-color-hover:white; --slds-c-accordion-heading-font-size:14px; --sds-c-accordion-summary-color-background: #0083c9; --slds-c-accordion-color-border: #dddbda; --slds-c-icon-color-foreground-default: #ffffff; --slds-accordion__summary-content:white; --slds-c-accordion-color-border: #dddbda; --slds-c-accordion-section-spacing-block-start: 0.125rem; --slds-c-accordion-section-spacing-block-end: 0.125rem; display: block; width: 100%; max-width: 100%; padding:0; margin-top: 12px; } .accordion-style lightning-accordion-section{ display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; } .accordion-style .slds-accordion__summary { padding-left: 0.5rem; padding-right: 0.5rem; } .accordion-style .slds-accordion__content { padding: 0; --slds-c-accordion-content-spacing-inline-start: 0px !important; } .accordion-style .tableContainer { width: 100%; margin: 0; padding: 0; } .accordion-style table { width: 100%; border-collapse: collapse; } .accordion-section{ --slds-c-accordion-summary-icon-color-foreground: #ffffff; --slds-c-accordion-section-content-color-background: rgb(247, 247, 247); } .slds-accordion__summary-action-icon .slds-button__icon_left, .slds-accordion__summary-action-icon .slds-button__icon, .slds-accordion__summary-action-icon .slds-button__icon svg { color: white !important; } .slds-icon-text-default{ --slds-c-accordion-icon-color-foreground : #ffffff; } .lightning-accordion .slds-accordion__summary-action-icon .slds-button__icon { color: white !important; } .slds-dropdown{ position: absolute; z-index: 10000; background: white; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .expandIcon, .collapseIcon { cursor: pointer; display: inline-block; text-align: center; width: 12px; } .btn-icon{ cursor: pointer; display: inline-block; text-align: center; width: 12px; } .hiddenIcon { display: none; } .hidden-help-icon { display: none; --slds-c-icon-color-foreground-default: #706e6b; } .invisible-help-trigger { width: 0.75rem; height: 0.75rem; padding: 0; border: 0; background: transparent; outline: none; line-height: 1; } th .slds-truncate { border-bottom: 1px dotted var(--slds-g-color-border-weak, #dddbda); } .invisible-help-trigger:focus { outline: 1px dotted var(--slds-g-color-border-strong, #706e6b); outline-offset: 2px; } .lookup-icons { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 18rem; position: relative; } .lookup-icons lightning-input { --slds-c-input-height: 24px; --slds-input-padding: 0.1rem 0.25rem; width: 100%; } lightning-input input.slds-input{ line-height: 1.3rem !important; min-height: auto !important; } /*.lookup-icons .lookup-input { width: 12rem; max-width: 18rem; }*/ .slds-input{text-align: center;} .expandIcon, .hiddenIcon { vertical-align: middle; } /* Reduce lookup dropdown font size */ .slds-listbox__option-text { font-size: 13px; line-height: 1.2; color: #747474; } .slds-media__body{ align-self: center; } .slds-listbox__option-meta { font-size: 10px; line-height: 1.2; font-weight: 500; color:#747474; } /* Reduce padding inside each option */ .slds-listbox__option { padding: 8px 12px; font-weight: 500; } .slds-listbox__option:hover{background-color: #392c2c; color: white;} /* Remove card-like appearance */ .slds-listbox__item { border: none; } .lookup-btn{ border: none !important; background: transparent ; width: 100%; text-align: left; padding: 0.5rem 0.75rem; } .lookup-btn .slds-media__figure{ margin-right: 0.5rem; } .lookup-btn:focus{ outline: none; box-shadow: none; } .slds-dropdown__header .slds-text-title_caps { font-size: 10px; padding: 4px 8px; } .slds-dropdown_length-5 { max-height: 180px; } /* Icon spacing fix */ .slds-media__figure { margin-right: 6px; } .slds-media{align-items: flex-start;} .detail-grid-2col { display: grid; grid-template-columns: 1fr 1fr; } .detail-item { margin-bottom: 0px !important; border-top: 1px solid #f0e6a0; padding: 0px !important; } .sales-table tbody tr > td, .prop-table tbody tr > td { border-bottom: 1px solid #f0e6a0; } .sales-table tbody tr:last-child > td, .prop-table tbody tr:last-child > td { border-bottom: none; } .detail-cell{ padding: 0; } lightning-combobox { position: relative;z-index: 9999; } .detail-label{ font-size: 10px; margin-left:3rem !important; min-width: 9rem; color: black; line-height: 1.25rem; white-space: normal; } .detail-field{ display: grid; grid-template-columns: 1fr 2fr; /* column-gap: 1rem; */ align-items: center; text-align: end; } .detail-input{ padding: 0px !important; width: 10.62rem; min-width: 7rem; clear: left !important; text-align: left !important; margin-left:2rem !important; } .textarea-sales{ width: 18.75rem !important; min-width: 12.75rem !important; height: 2.5rem; } /* .detail-input .slds-combobox { width: 130px; max-width: 130px; } */ .detail-txtarea{ --slds-c-textarea-sizing-height: 35px; /* Padding (vertical & horizontal) */ --slds-c-textarea-spacing-block-start: 0.25rem; --slds-c-textarea-spacing-block-end: 0.25rem; --slds-c-textarea-spacing-inline-start: 0.5rem; --slds-c-textarea-spacing-inline-end: 0.5rem; /* Border and radius */ --slds-c-textarea-radius-border: 0.25rem; --slds-c-textarea-color-border: #c9c9c9; height: 35px; width: 135px; display: block; } /* .detail-label.is-required::after { content: ' *'; color: #c23934; } */ .sales-table tbody tr, .prop-table tbody tr { background:white; } .detail-item.wide { grid-column: span 2; } .expanded-panel { background: #fff; padding: 0.5rem 0.75rem; /* overflow: visible;*/ } .detail-item .slds-form-element__label { font-weight: 700; color: #3e3e3c; margin-bottom: 0.25rem; /* white-space: nowrap; */ } /* .detail-grid-2col lightning-input, .detail-grid-2col lightning-combobox, .detail-grid-2col lightning-record-picker { width: 100%; } */ .detail-value { width: 100%; } /* Wide value (textarea or designated fields) spans remaining three columns */ .detail-value.wide { grid-column: span 2; }