css of autocompletes is faulty

[sennierer]

in autocompletes the selection and the default text are not in the middle of the line

setting line-height: initial for the span that holds the autocomplete fixes that

-> there might be a better fix though

[koeaw]

Possibly the same problem I'm seeing with the import from/create from GND dropdown (leaving aside the fact I'm not sure if we didn't discuss removing or reworking this anyway):

[koeaw]

setting line-height: initial for the span that holds the autocomplete fixes that

To add to my comment from last week (above): when I looked at the CSS of this same-ish problem I came across, I noticed that yeah, there's a mismatch between font size and line height (and height).

The computed default line-height would/should be 24px for the computed font-size of 16px (1rem) of the last 3 spans which contain one another, but it's set to 28px. The next <span> wrapping those 3 additionally has its computed height set to 28px when it should be 38px by default.

[koeaw]

It's these four (copy/paste from my browser, minus the span with the dropdown arrow):

<span class="select2-selection select2-selection--single listselect2 form-control" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_entity-container">
  <span class="select2-selection__rendered" id="select2-id_entity-container">
    <span class="select2-selection__placeholder">
      <span>Type to get suggestions</span>
    </span>
  </span>
</span>

[b1rger]

I think this might be this issue - so maybe moving to bootstrap 4 might solve the issue for us

[koeaw]

Later comments in a newer issue seem to indicate this is indeed a Bootstrap problem – with select2 – and that it persists in Bootstrap 4.

Suggested fix is: https://github.com/apalfrey/select2-bootstrap-5-theme

[koeaw]

Ah, I guess you meant to say Bootstrap 5 anyway!