Select2 clear icon overlapping with text in select dropdown-CodePudding

I'm having an issue where the text is overlapping under the hovering X "clear" button in the select menu. Adding padding to the right isn't a solution, as it pushes the icon outside of the box. I'm using the Select2 JS library found here https://select2.org/ and Bootstrap 5

<div >
  <select id="search_bar" >
    <option value="1">
      This is a long option string
    </option>
    <option value="2">
      This is another long option string
  </option>
  </select>
</div>

$("#search_bar").select2({
    theme: 'bootstrap-5',
    placeholder: "Some text",
    allowClear: true
});

Here is a JS Fiddle to try:

https://jsfiddle.net/tsbL58ov/18/

CodePudding user response：

add the following css.

    .select2-selection__clear {
    position: absolute !important;
    right: 2px !important;
}

https://jsfiddle.net/8n23bd6q/

CodePudding user response：

Follow the document here Select2 Docs. You can extend the select2 width, using the width: 'style' and inline style in the tag <select>. Here I set the width of the select to 200px

Then, by looking into the DOM structure of the select2 (using Chrome Devtool), I see that we can make the X button not overlap the text by adding this CSS:

.select2-selection.select2-selection--single {
  padding-right: 50px !important;
}

$("#search_bar").select2({
  theme: 'bootstrap-5',
  placeholder: "Some text",
  allowClear: true,
  width: 'style'
});

.select2-selection.select2-selection--single {
  padding-right: 50px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div >
  <select id="search_bar"  style="width: 200px">
    <option value="1">
      This is a long option string
    </option>
    <option value="2">
      This is another long option string
    </option>
  </select>
</div>