Auswählen2 Dropdown-Menü „Auswählen': Symbole löschen, die Text überlappen

Question

Ich stoße auf ein Problem, bei dem sich der Text unter der X-Schaltfläche „Löschen“ überlappt, wenn ich den Mauszeiger im Auswahlmenü bewege. Das Hinzufügen von Auffüllungen auf der rechten Seite ist keine Lösung, da dadurch das Symbol aus dem Rahmen verschoben wird. Ich verwende die Select2 JS-Bibliothek, die Sie hier finden: https://select2.org/ und Bootstrap 5

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

<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 class="">
  <select id="search_bar" class="form-select w-25">
    <option value="1">
      This is a long option string
    </option>
    <option value="2">
      This is another long option string
    </option>
  </select>
</div>

Answer 1

添加以下 CSS。

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

https://jsfiddle.net/8n23bd6q/

Answer 2

按照此处的文档操作 Select2 文档。您可以使用 width: 'style' 和标签 <select> 中的内联样式来扩展 select2 宽度。这里我将select的宽度设置为200px

然后，通过查看 select2 的 DOM 结构（使用 Chrome Devtool），我发现我们可以通过添加以下 CSS 来使 X 按钮不与文本重叠：

.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;
}

[email protected]/dist/select2-bootstrap-5-theme.min.css" />

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



  
    
      This is a long option string
    
    
      This is another long option string