django-materializecss-form
django-materializecss-form copied to clipboard
kalwalkden
css does not work for radio buttons
The package does not work for me
I installed the package with
pip install django-materializecss-form
I added the package in the installed apps
INSTALLED_APPS = ( 'materializecssform', ... )
I added to the <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 %}
in the template, I load the package with
{% load materializecss %}
and then I use it in my template as
{% extends 'nav_with_name.html' %}
{% load materializecss %}
{% load static %}
{% block content %}
<form action="/your-name" method="post">
{% csrf_token %}
{{ form|materializecss }}
{# {{ form }}#}
<input type="submit" value="Submit">
</form>
{% endblock content %}
but the style does not change.
Am I doing something wrong?
I have the version 1.1.14, with Django 3.0 and Python 3.6
@preisleistung Please try with version 1.1.15 and let me know if it works. You could also try creating the radio buttons via the {{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }} syntax.
I have the same problem. (version 1.1.17 - master)
Currently it's not styled.
There is missing - I added it manually in devtools and it works. Please see attached screen shot, where it works.
and the problem here:
Hi,
The problem is that the labels text needs a span tag to work, as @bartoszkoper said:
<label for="id_input">
<input type="radio" id="id_input" ... >
<span> Label Text </span>
</label>
The naive solution I found is to insert this tag using Javascript by modifying labels innerHTML property. Any other solution or approach?
If it helps somebody, there is dirty hack:
- Enable override form templates in settings.xml:
FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'
details: https://stackoverflow.com/questions/44675550/django-widget-override-template
2. Create template django/forms/widgets/radio_option.html in your templates dir:
{% if widget.wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>{% endif %}{% include "django/forms/widgets/input.html" %}{% if widget.wrap_label %} <span>{{ widget.label }}</span></label>{% endif %}
there is {{ widget.label }} wrapped into <span>.
