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:
Which produces view like this one:
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:
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?