Selection position issue with bootstrap 4

[nunesvictor]

Hi,

I'm heaving some trouble with the position of the selected element with dal.

Look at my example: The upper one is a autocomplete.ModelSelect2 widget, the bottom one is a ordinary select2.

Looking the HTML of them both they look close to each other.

I don't have any templateResult or templateFormat modifications on any of them.

Tried with both django-bootstrap4 and django-crispy-forms and the result is about the same.

---

My setup:

• Django==2.1.1
• django-autocomplete-light==3.3.2
• django-bootstrap4==0.0.7
• django-crispy-forms==1.7.2

[partofthething]

I find that if I change the line-height to 16px in select2.css it is much better.

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }

I don't know, however, where the appropriate place to override this would be in this scenario.

[nunesvictor]

I'll give this a try

[gogognome]

Any update on this issue? I have the same problem. I could work around it by setting the style in my own css file and ensure that one is loaded after select2.css is loaded.

[jpic]

Sure, can we see a pull request ?

[bixicy]

Any update?

[jpic]

Someone would have to make a pull request for review and potentially release

Le dim. 12 janv. 2020 à 16:38, bixicy notifications@github.com a écrit :

Any update?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/1055?email_source=notifications&email_token=AAAXDLCEAIHEINX5UVZJBR3Q5M2NRA5CNFSM4FXVAVQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIW4Y6A#issuecomment-573426808, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXDLCGOK34FA6E6BCHOKDQ5M2NRANCNFSM4FXVAVQA .

[bixicy]

I changed in this file:

/project dir /venv/lib/python3.7/site-packages/dal_select2/static/vendor/select2/dist/css/select2.css

This is this file: https://github.com/select2/select2/blob/9491e1aae246e9c43f868805cc3573b2cc8dd853/dist/css/select2.css Line 11 from height: 28px; to height: 38px;

[MathisRosenhauer]

I found that eb343e8ca35aebd131c1260bf7c423f79de2b86f caused the selection position to be off. It also broke the autocomplete.Select2() widget for me. I don't fully understand the purpose of this commit but can't we just treat containerCssClass as an option which could be passed like here? https://django-autocomplete-light.readthedocs.io/en/master/tutorial.html#passing-options-to-select2

[MathisRosenhauer]

Actually, this is already possible so please ignore my question. Select2 supports data-* attributes. You can override containerCssClass with

attrs={'data-container-css-class': ''}

This would also answer #1122

attrs={
    'data-close-on-select': 'false',
    'data-scroll-after-select': 'true',
}

[rafaelzottesso]

I got Bootstrap forms CSS properties and changed the DAL CSS to (just add in your form html page after import django autocomplete light media):

<style>
    .select2-container .select2-selection--single {
        height: calc(1.5em + .75rem + 2px);
        border: 1px solid #ced4da;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + .75rem + 2px);
    }
</style>

[keikoro]

Actually, this is already possible so please ignore my question. Select2 supports data-* attributes. You can override containerCssClass with

attrs={'data-container-css-class': ''}

@MathisRosenhauer This works, but it does not actually seem to be an officially supported config setting, at least I couldn't find it in this list of configuration options.

The CSS-related settings there, dropdownCssClass and selectionCssClass, on the other hand, don't seem to do anything when used with data-.