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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


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

https://django-select2.readthedocs.io/en/latest/



Hi,

Yes,
I try with
{{ form.appellation|add_class:"form-select form-select-solid"|attr:"data-control:select2"}}

with no success sad



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"}}) }}

https://joeymasip.medium.com/how-to-add-attributes-to-form-widgets-in-django-templates-4572cab695ab

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&egrave;phe</option>

<option value="2">Pauillac</option>

<option value="5">Pessac L&eacute;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



We tested your code by embedding it in the HTML file, and we can confirm that the multiple select functionality is working as expected.



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...:/



regards



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.

<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 happy



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! happy


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle