Sir,I rearranged the orders table using the custom template. (v2024)Added in User CSS: (default select2 min-width:20rem) to make select2 to occupy the available full space of the div.
.ew-select, .select2-container {
min-width: 100% !important;
width: 100% !important;
}
In the field setting “Use modal dialog for lookup : UNCHECKED” for both fields CustomerID & EmployeeID
<div class="row">
<label id="elh_orders_CustomerID" for="x_CustomerID" class="col-sm-2 col-form-label ew-label">
{{{caption CustomerID}}}<i data-phrase="FieldRequiredIndicator" class="fa-solid fa-asterisk ew-required"><span class="visually-hidden"></span></i>
</label>
<div class="col-sm-4">
{{{value CustomerID}}}
</div>
<label id="elh_orders_EmployeeID" for="x_EmployeeID" class="col-sm-2 col-form-label ew-label">
{{{caption EmployeeID}}}<i data-phrase="FieldRequiredIndicator" class="fa-solid fa-asterisk ew-required"><span class="visually-hidden"></span></i>
</label>
<div class="col-sm-4">
{{{value EmployeeID}}}
</div>
</div>
When i click the select2 dropdown button for selecting the record, the dropdown is not displaying below the select2, but at the left most edge of the entire screen, able to select the records only when i close the left sidebar menu.The dropdown alignment problem is happening only when i change the width, min-width,max-width of select2. If i remove the CSS for Changing the Width in User CSS, this problem does not raising.Please kindly guide me how to make the select2 occupy the available full space of the div.