CODEWITHSUNDEEP
flaskradio-buttonwtformsrating
Julia
Julia

Reputation: 1

How to style wtform RadioField

I'm working on a project and I have a wtform that has a radio field for users rating films. The html is as follows:

{% extends "base.html" %}

{% block content %}
    <h1 class="title">Log Movie</h1>
    <div class="content-log">
        <form class="log-form" action="" method="post">
            <div class="log-poster-div"> 
                <img class="log-poster" src="https://image.tmdb.org/t/p/w500/{{result.poster_path}}" alt="">
                <div class="rest-log-info">
                    <h2 class="log-name"> {{ result.title }} ({{ result.release_date[:4] }}) </h2>
                    {{ form.hidden_tag() }}
                    <p class="log-date"> {{ form.dateWatched.label }}  {{ form.dateWatched() }}</p>
                    <div class="review-cont"><p class="log-reveiw"> {{ form.movieReview() }} </p></div>
                    <p class="log-stars"> {{ form.movieRating() }}</p>
                    <p class="repeat-log">{{ form.movieRewatch.label }} {{ form.movieRewatch() }}</p>
                </div>
            </div>
            <p class="log-button">{{ form.submit() }}</p>
        </form>
    </div>
    
{% endblock %}

I've looked online and can't seem to make the existing css examples for star ratings work with my radio field. Does anyone know how to transform this so that users can rate using stars and not the ugly radio buttons?

Ideally I'd love for it to look like the example on this page: https://codepen.io/recodenow/pen/YZqgZW

Thanks for any help!!!

Upvotes: 0

Views: 840

Answers (1)

cerda
cerda

Reputation: 11

either by overriding rendering in code or by default rendering enhanced by javascript to set required properties or by manually rendering all the items (options) (see bellow)

{% for subfield in form.radio %}
    <tr>
        <td>{{ subfield }}</td>
        <td>{{ subfield.label }}</td>
    </tr>
{% endfor %}

Upvotes: 1

Related Questions