Skip to main content

Tweak the form field rendering in templates, not in python-level form definitions.

Project description

Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes is supported.

That should be enough for designers to customize field presentation (using CSS and unobtrusive javascript) without touching python code.

The license is MIT.

Installation

pip install django-widget-tweaks

Then add ‘widget_tweaks’ to INSTALLED_APPS.

Usage

This app provides several template filters that can alter CSS classes and HTML attributes of django form fields.

attr

Adds or replaces any single html atribute for the form field.

Examples:

{% load widget_tweaks %}

<!-- change input type (e.g. to HTML5) -->
{{ form.search_query|attr:"type:search" }}

<!-- add/change several attributes -->
{{ form.text|attr:"rows:20"|attr:"cols:20"|attr:"title:Hello, world!" }}

<!-- attributes without parameters -->
{{ form.search_query|attr:"autofocus" }}

add_class

Adds CSS class to field element. Split classes by whitespace in order to add several classes at once.

Example:

{% load widget_tweaks %}

<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}

set_data

Sets HTML5 data attribute ( http://ejohn.org/blog/html-5-data-attributes/ ). Useful for unobtrusive javascript. It is just a shortcut for ‘attr’ filter that prepends attribute names with ‘data-’ string.

Example:

{% load widget_tweaks %}

<!-- data-filters:"OverText" will be added to input field -->
{{ form.title|set_data:"filters:OverText" }}

append_attr

Appends atribute value with extra data.

Example:

{% load widget_tweaks %}

<!-- add 2 extra css classes to field element -->
{{ form.title|append_attr:"class:css_class_1 css_class_2" }}

‘add_class’ filter is just a shortcut for ‘append_attr’ filter that adds values to the ‘class’ attribute.

add_error_class

The same as ‘add_class’ but adds css class only if validation failed for the field (field.errors is not empty).

Example:

{% load widget_tweaks %}

<!-- add 'error-border' css class on field error -->
{{ form.title|add_error_class:"error-border" }}

render_field

This is a template tag that can be used as an alternative to aforementioned filters. This template tag renders a field using a syntax similar to plain HTML attributes.

Example:

{% load widget_tweaks %}

<!-- change input type (e.g. to HTML5) -->
{% render_field form.search_query type="search" %}

<!-- add/change several attributes -->
{% render_field form.text rows="20" cols="20" title="Hello, world!" %}

<!-- append to an attribute -->
{% render_field form.title class+="css_class_1 css_class_2" %}

Contributing

If you’ve found a bug, implemented a feature or have a suggestion, do not hesitate to contact me, fire an issue or send a pull request.

Source code:

Bug tracker: https://bitbucket.org/kmike/django-widget-tweaks/issues/new

running the tests

Make sure you have tox installed, then type

tox

from the source checkout.

Changes

1.1.1 (2012-03-22)

  • some issues with render_field tag are fixed.

1.1 (2012-03-22)

  • render_field template tag.

1.0 (2012-02-06)

  • filters return empty strings instead of raising exceptions if field is missing;

  • test running improvements;

  • python 3 support;

  • undocumented ‘behave’ filter is removed.

0.3 (2011-03-04)

  • add_error_class filter.

0.2.1 (2011-02-03)

  • Attributes customized in widgets are preserved;

  • no more extra whitespaces;

  • tests;

0.1 (2011-01-12)

Initial release.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-widget-tweaks-1.1.1.tar.gz (6.4 kB view details)

Uploaded Source

File details

Details for the file django-widget-tweaks-1.1.1.tar.gz.

File metadata

File hashes

Hashes for django-widget-tweaks-1.1.1.tar.gz
Algorithm Hash digest
SHA256 99699c5998c6bcae734407be10b01dd2e485b75b722ac82fd27ce3f29ab6e63a
MD5 adebcb1cb058817783d9d1d9e38c3668
BLAKE2b-256 79ab9864b5c62af22f880f727397a9e18dda389b5a7acef1a4804d373b0edd29

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page