materialize-css-form

Materializecss for Django Form

A simple Django template tag to work with Materializecss

Install

From PyPi:

pip install  django-materializecss-form

From GitHub

Add module to INSTALLED_APPS:

INSTALLED_APPS = (
     'materializecssform',
     ...
     )

Add Materialize CSS to your project (Official Documentation):

In your base.html:

<head>

{% block css %}
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
{% endblock css %}

</head>


<body >

{% block javascript %}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){

  // Initialize materialize data picker
  $('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
  $('select').formSelect();

});
</script>
{% endblock javascript %}

...

</body>

Usage

Import the module simply like this:

{% load materializecss %}

Full form

Format a whole form:

{{ form|materializecss }}

Individual field

Format only a specific field:

{{ form.<field name>|materializecss }}

Custom size (default is 's12')

Apply custom sizes in grid (see Materialize CSS documentation):

{{ form|materializecss:'m6' }}
{{ form|materializecss:'custom_size=m6' }}

Icons support

This is most useful for adding a descriptive icon when you are creating a custom layout by building the form one field at a time. Substitue FIELD_NAME below with one of the field names from your form.

{{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }}
{{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }}

Optional icon sets

If you're using optional icon sets you need to set MATERIALIZECSS_ICON_SET in your settings file:

MATERIALIZECSS_ICON_SET = 'fontawesome'

Currently Font Awesome and GLYPHICONS is supported, however you might need to modify your CSS for full support.

Note about `DateTimeField`

Input field is rendered as a datetime-local type, this lets the user easily enter both a date and a time. As this field requires ISO-8601 format, your main project settings need to include the ISO format in order for the form to interpret this field valid:

from django.conf.global_settings import DATETIME_INPUT_FORMATS

# ISO 8601 datetime format to accept html5 datetime input values
DATETIME_INPUT_FORMATS += ["%Y-%m-%dT%H:%M:%S", "%Y-%m-%dT%H:%M"]

Demo

Basic form

DatePicker

DateTimePicker

Help

Widget

TextInput
Textarea
CheckboxInput
RadioSelect
Select
SelectMultiple
CheckboxSelectMultiple
Filefield
DateField
DateTimeField

Inspired by

django-bootstrap-form

Originally Built By

Florent CLAPIÉ (PyPI)

Release files for django-materializecss-form 1.1.18

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-materializecss-form 1.1.18
File	Size	Uploaded
django-materializecss-form-1.1.18.linux-x86_64.tar.gz	6.6 kB	Dec 7, 2020	Details

Release files / django-materializecss-form-1.1.18.linux-x86_64.tar.gz

Download URL	django-materializecss-form-1.1.18.linux-x86_64.tar.gz
Size	6.6 kB
Tags	Source
SHA-256 checksum How to use checksums	`0e3bc1a4e2ac2a4bfdaedd7c01d318101f4c58034f626c5c8edd829b4631dac8`
BLAKE2b-256 checksum How to use checksums	`69c9347171f4d6268b8274be481d72bb87ccd62ec1ddaca35bdf30581bf44c38`
Upload date	Dec 7, 2020
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`twine/3.2.0 pkginfo/1.6.1 requests/2.24.0 setuptools/50.3.0 requests-toolbelt/0.8.0 tqdm/4.52.0 CPython/3.8.6`