Django-autocomplete-light: Idea: Make Bootstrap Compatible

[jorgeorpinel]

There's this theme https://github.com/select2/select2-bootstrap-theme

But currently not compatible with django-autocomplete-light even if I add the theme manually since I can't apply it to the Widgets (constructor doestn't recognize theme param) nor do I know how to apply it as the Select2 default theme after the Select2 script is added but before the select2() function is called.

[jpic]

In the mean time, you could just override this static script and set the theme in the constructor
https://github.com/yourlabs/django-autocomplete-light/blob/master/src/dal_select2/static/autocomplete_light/select2.js#L102-L111

However, it would be nice to be able to set some JS constructor options in the widget.
@gagarski do you have a recommendation ?

[gagarski]

@jorgeorpinel, have you tried to set data-theme attribute of the widget to bootstrap?
Doing this and adding select2-bootstrap CSS to the page made my Select2s bootstrapped.

[gagarski]

@jorgeorpinel

Here is a sketch based on code from our project that will make setting this attribute easier.

class Select2BootstrapWidgetMixin(object):
    class Media:
        css = {
            'all': (
                'autocomplete_light/vendor/select2/dist/css/select2.css', # The one from dal_select2.widgets.Select2WidgetMixin
                'css/select2-bootstrap.min.css'  # Bootstrap theme itself
            )
        }

        js = (
               # Copy everything from dal_select2.widgets.Select2WidgetMixin
        )

    def build_attrs(self, *args, **kwargs):
        attrs = super(Select2BootstrapWidgetMixin, self).build_attrs(*args, **kwargs)
        attrs.setdefault('data-theme',
                         'bootstrap')
        return attrs


class ModelSelect2Bootstrap(QuerySetSelectMixin,
                            Select2BootstrapWidgetMixin,
                            Select2):
    """
    Use this instead of ModelSelect2 widget
    """
    autocomplete_function = 'select2'


class ModelSelect2MultipleBootstrap(QuerySetSelectMixin,
                                    Select2BootstrapWidgetMixin,
                                    Select2Multiple):
    """
    Use this instead of ModelSelect2Multiple widget
    """
    autocomplete_function = 'select2'

[gagarski]

However, it would be nice to be able to set some JS constructor options in the widget.

Actually you can set almost all of theme using data-* Select2 HTML-attributes: https://select2.github.io/options.html#data-attributes. Except for JS callbacks. But setting them from Python widget constructor does not seem like a good idea.

[jorgeorpinel]

@jpic

In the mean time, you could just override this static script...

Seems I don't need to, but it's useful to know where exactly the Select2 init is run, thanks!

@gagarski

have you tried to set data-theme attribute of the widget to bootstrap?

I thought I tried but I didn't do it correctly. You're right, it does work! Thanks for the other ideas as well.

I just wish I knew how to control the Django media so that {{ form.media }} prints the seelct2-bootstrap3.css right after the select2.css in templates, I'll look it up.

[gagarski]

I just wish I knew how to control the Django media so that {{form.media }} prints the seelct2-bootstrap3.css right after the select2.css , I'll look it up.

AFAIK, order of these files does not matter. select2-bootstrap.css does not explicitly override any select2.css styles. Instead, setting data-theme to bootstrap adds some classes to Select2 widget and styles for these classes are affected by select2-bootstrap.css.
Am I wrong?

[jpic]

Awesome, @jorgeorpinel would you like to publish a blog article or something to share with the community ?

[linneudm]

I'm trying to do what @gagarski suggested https://github.com/yourlabs/django-autocomplete-light/issues/850#issuecomment-303451040, but it's not working for me. Could someone help me please?

This is part of my code:
https://gist.github.com/linneudm/2a78d5ea82b50b4e76c4eaef358bc5c2

The bootstrap CSS file does not load. When I try to use it through data-attrib (theme: bootstrap), this works. However, the URL with the objects and the entire configuration is lost.

[gagarski]

Hi, @linneudm.

Please check the following:

• The page with your autocomplete contains <link> tag with css/select2-bootstrap.min.css
• Link to CSS file is not dead (note that neither DAL nor select2 ship select2-bootstrap CSS, you have to get it from a repo from the OP comment).
• The underlying hidden <select> element has data-theme="bootstrap" attribute.

If everything of the above is correct, then Select2 should have Bootstrap theme.

[linneudm]

Hi @gagarski
Thank you for your attention!

I checked all the items.
But the result comes out different if I try to use the data-attrib in Javascript.
$("#id_example_field").select2({ theme: "bootstrap" });
Is that correct?
Please, check the images:
without datta-atrib
with datta-atrib

[gagarski]

The second one definitely looks more like Bootstrap select.

What do you mean by with data-attrib? Do you add data-theme attribute in the python widget constructor?

[linneudm]

Should I do just that?
https://gist.github.com/linneudm/2a78d5ea82b50b4e76c4eaef358bc5c2#file-widgets-py-L16
So, I guess I added. Or should I pass as a parameter here?
https://gist.github.com/linneudm/2a78d5ea82b50b4e76c4eaef358bc5c2#file-forms-py-L8

"with datta-attrib" in fact is when I add the javascript code in the HTML page that I use the DAL.
$("#id_example_field").select2({ theme: "bootstrap" });

[gagarski]

No, the idea of this mixin is that you do not have to add 'data-theme' attribute to widget constructor, build_attrs method does this for you.

Plase try to create simple select (with HTML) and initialize it with select2 function with JS. Try to pass theme option with data attribute on <select> (<select data-theme="bootstrap">...</select>) and without an attribute but with passing theme as a parameter to the function. Does it work the same way?

[linneudm]

Don't work, only with JS parameter. =(
If I pass the attribute by html (data-theme = "bootstrap"), nothing happens.
For some reason, bootstrap CSS is not being used in select2 subclasses.

[carlos22]

This works for me (using bootstrap 4 theme from https://github.com/berkan52/select2-bootstrap4-theme)

$(document).one('autocompleteLightInitialize', '[data-autocomplete-light-function=select2]', function() {
    $.fn.select2.defaults.set( "theme", "bootstrap4" );
});

Just add anywhere in your js (after jquery is loaded).

Oh and make sure the css file is loaded AFTER the select2.css bundeled with this package. E.g.

<link rel="stylesheet" href="{% static "assets/select2-bootstrap4.css" %}" />
</body>

[ghost]

@carlos22 thanks for this tip. finally got this working. Although slightly different implementation (see below). Also, for anyone else driven crazy by the height of the select box open your select2-bootstrap4.css file, and add min-height to class: .select2-container--bootstrap4 .select2-selection { min-height: 40px; }

class NewPostForm(forms.ModelForm):
target = forms.ModelChoiceField(
queryset=Celebrities.objects.all(),
widget=autocomplete.ModelSelect2()
)

class Meta:
    model = Post
    fields = ['target', 'content']

def __init__(self, *args, **kwargs):
    super(NewPostForm, self).__init__(*args, **kwargs)
    self.fields['target'].widget.attrs = {
        'data-theme': 'bootstrap4',
    }

[carlos22]

@ghostcoder1019x is there a way to set this widget attr to any widget? Or can we extend ModelSelect2 and set it there? I have a lot of fields using it and it would be cumbersome to add it everywhere like you suggest...

I think a theme is something you want to set globally.

[ghost]

@carlos22 good question. I'm not sure. I've actually moved away from DAL in my public facing app and only use it for the back end admin. I had so many items to load it was very slow. As for Django forms being cumbersome, yeah... that's how they're designed. More of a general approach that falls apart in micro/specific situations. Off the top of my head, maybe look into the native DAL code to look for a way to configure those settings globally.

[bernd-wechner]

I'm a tad bamboozled by the size of these widgets. Mine are rendering a lot taller that a line of text, unlike the standard HTML select widget which renders similar in size to a line of text. The ModelSelect2Multiple widget I'm using renders a full 37 pixels high and the select box I'm replacing it with renders 19 pixels high. So it's almost twice as fat. It could slim down heaps.

I notice a pile of demos here:

http://select2.github.io/select2-bootstrap-theme/4.0.3.html#rtl-support-and-control-sizing

notably they have three sizes, running 28px, 32px and 44px (no 37px), and a little lower they have a large and Small group with heights with heights 46 and 30 px.

Alas I have now looked at the sizing of these in the CSS inspection tools of Chromium Developer Tools for far too long without really understanding what controls the height (there are many nested elements and classes) and remain bamboozled and am asking myself if this is not a general issue and solved concern? I notice that themes are supported:

https://select2.org/appearance#themes

yet the documentation is poor (what themes exist, and how do I select one with DAL?) and on-line searching for select2 themes there don't seem many on offer and none as simple as a plain HTML theme that tries to render similar to standard HTML elements we're replacing.

I'm mostly concerned with those two questions here:

1. General theming and how to specify and what themes are available
2. More specifically how to control the height of these controls in CSS (make them tighter with less white space internal to them)

This may all be moot in the long run and perhaps for many others as well, hence not solved (as I like to think it must be). Mainly because I have plans to bootstrap the whole site, and well, all the other controls will fall into line then I guess and things look more consistent. Right now I'm replacing individual select elements with DAL widgets to see how it all works and there's a real clashing style difference betwen vanilla HTML and DAL widgets.