Place Materialize CSS to FileField - Django

Question

Place Materialize CSS to FileField - Django

Navigation

#1 by (1 votes)

0

I am trying to use the File_CSS from Materialize but I can not find a way to make it work for me.

This is my model:

class ComprobanteDomicilio(models.Model):
    alumno = models.ForeignKey(Alumno, on_delete=models.CASCADE)
    url_documento = models.FileField(upload_to=ubicacion_comprobante_domicilio)

This my form

class ComprobanteDomicilioForm(forms.ModelForm):
    class Meta:
        model = ComprobanteDomicilio
        fields = ('url_documento',)

The question is, how do I style it? This is what it looks like now:

python django materialize django-forms

asked by Reynald0 30.04.2017 в 09:52

source

1 answer

Problem with inheritance in c # how can I send a variable php by onclick for a function js [closed]

score 1 · Answer 1

Although it is possible to add attributes to the widgets and fields of a form from the form's definition in Django, to add elements div there is no way, so you have to do it by hand.

In the case you mention, two input controls are used, but only one of them goes in your model. You should modify your class ComprobanteDomicilioForm with something like this:

class ComprobanteDomicilioForm(forms.ModelForm):
    class Meta:
        model = ComprobanteDomicilio
        fields = ('url_documento',)

    def __init__(self, *args, **kwargs):
        super(ComprobanteDomicilio, self).__init__(*args, **kwargs)
        self.fields['url_documento'].widget = TextInput(attrs={
            'class': 'file-path validate',
            'placeholder': 'Subur un archivo'})

The rest should be done in the template. You just need to know that you can not use {{ form.url_documento }} because it includes a label and you do not want it. So you should do something like this:

<form action="#">
  {% for field in form %}

  {% comment %}
    Aqui va el campo alumno
  {% endcomment %}

  <div class="file-field input-field">
    <div class="btn">
      <span>File</span>
      <input type="file">
    </div>
    <div class="file-path-wrapper">
      {{ url_documento.errors }}
      {{ url_documento }}
      {% if url_documento.help_text %}
        <p class="help">{{ url_documento.help_text|safe }}</p>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</form>

Check the documentation on how to go through the fields of a form: link