Select2 dropdown alignment problem

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
gopalverma1
User
Posts: 10

Select2 dropdown alignment problem

Post by gopalverma1 »

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.


mobhar
User
Posts: 11726

Post by mobhar »

You may Inspect HTML element and add your own CSS styles.

You need to do some experimental action since there are some related css class that used by Select2 control.


gopalverma1
User
Posts: 10

Post by gopalverma1 »

Thank you sir,

The below code in user CSS for resizing select2 to occupy the full available width is working perfectly sir,

.select2.select2-container.select2-container--bootstrap5 {
  min-width: 100% !important;
  width: 100% !important;
}

Sorry for the delayed reply, as i am training with the used system, it always putting me in trouble.

thank you again sir.


Post Reply