django-select2 css
Hi,
I would like to use django-select2 to have multiple selection.
But the result in terms of presentation is not at all up to the level even by adding the class: "form-select form-select-sm form-select-solid"
How to solve it ?
Thank fot your help.
Regards
Replies (10)
I'm glad to hear that you were able to resolve the issue! Your provided solution can be helpful for others. If you have any more questions or need further assistance, please feel free to reach out. Thank you for sharing your experience! 
I recommend using Select2 from the Metronic HTML version. You can refer to the Select2 documentation here:
https://preview.keenthemes.com/html/metronic/docs/forms/select2#multiple-selection
This documentation provides guidance on how to implement and configure Select2 to achieve the desired functionality, which should work similarly to the example provided in the documentation.
<img src=" alt="image" border="0"><br />
Hi Faizal, il solve it !
So, for everyone :
model.py with a ManyToManyField
class Ranking(models.Model):
name = models.CharField(db_index=True, max_length=200)
initials = models.CharField(db_index=True, max_length=10, blank=True, null=True)
appellation = models.ManyToManyField(Appellation)forms.py
class RankingForm(forms.ModelForm):
appellation = forms.ModelMultipleChoiceField(
widget = forms.SelectMultiple,
queryset = Appellation.objects.all()
)
class Meta:
model = Ranking
fields = "__all__"form.html
{% load widget_tweaks %}
{{ form.appellation|add_class:"form-select form-select-solid"|attr:"data-control:select2"}}And all is ok with metronic css
We tested your code by embedding it in the HTML file, and we can confirm that the multiple select functionality is working as expected.
<img src=" alt="image" border="0">
Could you please send the screenshot of the issue?
Hi Faizal,
Yes it work like you. But it's not metronic css !
look in dark mode...:/
<img src="
regards
The code snippet you provided seems to have some syntax issues. If you're trying to add classes and attributes to a form element using Twig, you can do it like this:
{{ form_widget(form.appellation, {"attr": {"class": "form-select form-select-solid", "data-control": "select2"}}) }}In this code:
form.appellation represents the form field you want to modify.form-widget is used to render the form field, and you can pass attributes as a dictionary within the attr key.
Make sure you replace form.appellation with the actual form field you're working with, and adjust the class and attribute values as needed for your specific requirements.
Also, please ensure that you have the necessary JavaScript and CSS libraries (like Select2) included in your project, as the data-control:select2 attribute suggests that you are using Select2 for enhancing select elements, and it requires additional resources to work properly.
Hi Faizal,
No it's ok with django-widget-tweaks package.
it's "just" there is something between django-select2 and metronic select2 :/
Regards
Hi Faizal, no news ?
I have form-select form-select-solid in my select but with no sucess..:/
<select name="appellation" lang="fr" data-minimum-input-length="0" data-theme="default" data-allow-clear="false" data-control="select2" class="form-select form-select-solid django-select2 select2-hidden-accessible" required="" multiple="" data-select2- tabindex="-1" aria-hidden="true">
<option value="1">Saint Estèphe</option>
<option value="2">Pauillac</option>
<option value="5">Pessac Léognan</option>
<option value="6">Sauternes</option>
<option value="7">Saint Emilion</option>
<option value="8">Pomerol</option>
<option value="12">Margaux</option>
<option value="13">Saint Julien</option>
</select>Regards
Hi,
Have you checked the official documentation for django-select2? You can find detailed information and examples on how to customize and style the select2 widget on their documentation website
Hi,
Yes,
I try with
{{ form.appellation|add_class:"form-select form-select-solid"|attr:"data-control:select2"}}
with no success 
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
