Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css does not work for radio buttons #43

Open
brunomorampc opened this issue Jan 3, 2020 · 5 comments
Open

css does not work for radio buttons #43

brunomorampc opened this issue Jan 3, 2020 · 5 comments

Comments

@brunomorampc
Copy link

brunomorampc commented Jan 3, 2020 •
edited
Loading

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
@kalwalkden
Copy link
Owner

@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.

@bartoszkoper
Copy link

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.

image

and the problem here:

image

@cortesjpb
Copy link

cortesjpb commented Oct 13, 2020 •
edited
Loading

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?

@fgagarin
Copy link

fgagarin commented Feb 9, 2023 •
edited
Loading

If it helps somebody, there is dirty hack:

  1. 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>.

@kalwalkden
Copy link
Owner

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kalwalkden @fgagarin @brunomorampc @cortesjpb @bartoszkoper