CODEWITHSUNDEEP
djangodjango-modelsdjango-formsmaterialize
Papouche Guinslyzinho
Papouche Guinslyzinho

Reputation: 5468

django: how to add a select field in the forms.py with materializecss

I have a forms.py I want to be able to see the select tag in HTML I'm getting an error

forms.py

    class ArticleForm(ModelForm):

        class Meta:

            STATUS_CHOICES = (
                ('d', 'Draft'),
                ('p', 'Published'),
            )
            model = Article
            fields = (
                'title', 'description', 
                'article_header_image', 'status',
                )

models.py

class Article(TimeStampedModel):
    """
    Article model.
    """
    STATUS_CHOICES = (
        ('d', 'Draft'),
        ('p', 'Published'),
    )
    title = models.CharField('title', max_length=150)
    description = models.TextField('content')
    status = models.CharField('article status', max_length=1,
                              choices=STATUS_CHOICES, blank=True, null=True, default='p')
    article_header_image = models.ImageField(
            upload_to="artice__header_image/%Y/%m/%d"
            )

create.html

  <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.as_p }}
      <input class="btn" type="submit" value="Create" />
  </form>

I do not see the select tag on HTML

html source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Django Class Based Views Rock</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/materialize/0.98.2/css/materialize.min.css">
    <style>
      .title {
        text-align: center;
        font-weight: 200;
      }
    </style>
  </head>
  <body>

      <div class="container">

  <h3 class="title">Create New Article</h3>
  <form method="post" enctype="multipart/form-data">
      <input type='hidden' name='csrfmiddlewaretoken' value='V6IJWF7lceEbe8pT4yN7GaCqgHnbZsbgpFWTcH9dwxzpNZzX2GFKILzpMyvs5Fls' />
      <p><label for="id_title">Title:</label> <input id="id_title" maxlength="150" name="title" type="text" required /></p>
<p><label for="id_description">Content:</label> <textarea cols="40" id="id_description" name="description" rows="10" required>
</textarea></p>
<p><label for="id_article_header_image">Article header image:</label> <input id="id_article_header_image" name="article_header_image" type="file" required /></p>
<p><label for="id_status">Article status:</label> <select id="id_status" name="status">
<option value="">---------</option>
<option value="d">Draft</option>
<option value="p" selected="selected">Published</option>
</select></p>
      <input class="btn" type="submit" value="Create" />
  </form>

      </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js" />
  </body>
</html>

Upvotes: 1

Views: 1886

Answers (1)

Raja Simon
Raja Simon

Reputation: 10315

If you want to display Materializecss select then you want to wrap it with .input-field class form

You have two options here.

  1. Use individual form tag using {{ form.status }} wrap with .input-field div class

    <div class="input-field">
  {{ form.status }}
</div>

  2. Or use django-materializecss-form

Upvotes: 2

Related Questions