CODEWITHSUNDEEP
wtformsflask-wtformsmaterial-design-lite
tiagosilva
tiagosilva

Reputation: 1776

WTForms with Material Design Lite

I'm trying to use mdl and flask-wtf to render a simple form. According to the documentation i have to add the mdl classes to the form.

5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the class attribute.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

So i'm using this in my templates:

<form method="POST">
  {{ form.hidden_tag() }}
  <div class=mdl-textfield mdl-js-textfield mdl-textfiedl--floating-label">
    {{ form.email.label }}
    {{ form.email(class="mdl-textfield__input") }}
  </div>
</form>

This doesn't fully work because i need to add the mdl-textfield__label class to the label.

Is there a way to do this using wtforms or do i have to ignore the {{ form.email.label }} part and just make the label myself?

Upvotes: 1

Views: 917

Answers (1)

krekle
krekle

Reputation: 135

I would suggest writing your own template macro. That way you could get your forms looking exactly as you want, and all your forms will look the same throughout your site.

Take a look here: http://bear-z.com/python/render-bootstrap-3-forms-with-wtforms-and-jinja/

Upvotes: 1

Related Questions