Django FilteredSelectMultiple widget rendered with bootstrap

Question

I am trying to replicate the FilteredSelectMultiple widget used in the admin of the django apps. But my widget is rendered very different

The widget in the admin using django-suit or django_admin_bootstrapped is rendered with bootstrap:

I define my widget and media the forms.py:

class ProcFTPForm(forms.ModelForm):
      id_archivo = forms.ModelMultipleChoiceField(queryset=Archivo_Descarga.objects.all(),required=True,widget=FilteredSelectMultiple("Archivo",is_stacked=False))
      class Media:
       css = {'all':('/admin/css/widgets.css',),}
       js = ('/admin/jquery.js','/admin/jsi18n/')

      def __init__(self, *args, **kwargs):
          super(ProcFTPForm, self).__init__(*args, **kwargs)
          self.helper = FormHelper()

      class Meta:
            model = Lista_Archivos

And in the template I call the media files in this way:

{{ form.media }}

How can I render the FilteredSelectMultiple widget looking similar like the widget from the admin. In other words how can I render this widget using bootstrap.

I am using django-crispy-forms and the other widgets are rendered with bootstrap except the FilteredSelectMultiple widget

Any advice

Thanks in advance

Answer 1

django-admin-bootstrapped specifies styles to override django admin defaults i.e. like the file overrides.css. The widget FilteredSelectMultiple use the css class .selector and your page should apply css selectors declared from line 39 to 119 of overrides.css, so you will need to add its styles to your page, either by changing your Media class in form:

class Media:
   css = {'all':('/admin/css/widgets.css', 'admin/css/overrides.css'),}
   js = ('/admin/jquery.js','/admin/jsi18n/')

or directly include it template:

<link href="{{ STATIC_URL }}admin/css/overrides.css" type="text/css" rel="stylesheet" />

Hope this solve your problem