2
votes

I wanted to add to my webpage a simple tagging option, using Selectize for Django. I first created a ModelForm as follows:

class Tag_forms(ModelForm):
    class Meta:
        model = case
        fields = ['tags']   
        widgets = {
        'tags': tag_widget.TagSelectize(attrs={
                        'placeholder': '',
                            }),
        }
    def __init__(self, *args, **kwargs):
        super(Tag_forms, self).__init__(*args, **kwargs)
        self.fields['tags'].widget.attrs.update({})

After pasting the above ModelForm into HTML doc via Django tagging + attachment of JS and CSS for Selectize, I get a working tag window - so far so good.

However, the problems start when I try to implement some Bootstrap form formatting into the mix. The HTML structure this Django implementation builds looks like so:

enter image description here

Which produces view like this one:

enter image description here

However, when I try and add form-control class to the "selectize-control" to format everything in it nicely and align it with Bootstrap goodness, I get the following:

enter image description here

Its functionality is intact, but "selectize-control" and "selectize-input" divs get misaligned. I can apply form-control to the inner one, but then I lose the ability to see effects of adding "is-valid / is-invalid" classes to any of these divs - green/red frame is just not visible.

Not only that, I cannot really add id or any real attribute to the 2nd inpu box in that code as well - when I work these wanted parameters into the ModelForm code, they appear on the outer input box, which does not even get displayed.

Anyone?

2

2 Answers

0
votes

I used selectize.bootstrap4.css instead of the default css. More info here

-1
votes

Remove class form-control from select input