CODEWITHSUNDEEP
twitter-bootstrap-3flaskwtformsflask-wtforms
Lucien S.
Lucien S.

Reputation: 5345

Bootstrap and horizontal radio buttons

I'm trying to display radio buttons horizontally using Bootstrap-CSS and Flask-WTForms. As far as I understand, I need to use the Bootstrap class class_="radio-inline" to accomplish that. I've tried it and all I get is this:

enter image description here

where radio buttons are, discouragingly, organized vertically.

Flask WTForm code:

from flask.ext.wtf import Form
import csv
import os
import buildHome as bh
from wtforms import TextField, RadioField, TextAreaField, SubmitField, validators, BooleanField

class ContactForm(Form):

    firstName = TextField("First name",  [validators.Required("Please enter your first name.")])
    lastName = TextField("Last name",  [validators.Required("Please enter your last name.")])
    #name = TextField("Name",  [validators.Required("Please enter your name.")])
    email = TextField("Email",  [validators.Required("Please enter your email address."), validators.Email("Please enter your email address.")])

    node_1 = BooleanField("Joan Johnson (Buckridge Inc)")
    direction_1 = RadioField('', choices=[('Choice1','Choice1'),('Choice2','Choice2'),('Choice3','Choice3')])
    freq_1 = RadioField('', choices=[(1,'Daily'),(7,'Weekly'),(30,'Monthly'),(183,'Yearly'),(365,'More')])

    submit = SubmitField("Send")

Html template for Flask to create the html code

{% extends "layout.html" %}
{% block content %}

<form action="{{ url_for('home') }}" method=post>

{{ form.hidden_tag() }}

<h3>Part I</h3>

<div class="well span6">
<div>
    {{ form.firstName.label }} {{ form.firstName }}
</div>

<div>
    {{ form.lastName.label }} {{ form.lastName }}
</div>

<div>
    {{ form.email.label }} {{ form.email }} 
</div> 
</div>

<h3>Part II</h3>

<div <form class="form-horizontal" role="form"> 

<div class="well span6">
    {{ form.node_1 (class_="checkbox style-2 pull-left") }} {{ form.node_1.label(class_="col-sm-3 control-label") }}
    {{ form.direction_1.label }} {{ form.direction_1 (class_="radio-inline") }}
    {{ form.freq_1.label }} {{ form.freq_1 (class_="radio-inline") }} 
</div>

{{ form.submit }}{% endblock %}

Html script, produced by the Flask WTForm script above

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!DOCTYPE html>
        <html>
            <head>
                <title>TITLE</title>
                <link rel="stylesheet" href="/static/css/bootstrap.css">
            </head>
            <body>

            <header>
                <div class="container">
                    <h1 class="logo">LOGO</h1>
                    <nav>
                        <ul class="menu">
                            <li><a href="/">Home</a></li>
                        </ul>
                    </nav>
                </div>
            </header>

                <div class="container">

        <form action="/" method=post>
        <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1454454094##65db3f398f17785503e4bf13dfe76ad4879eb792"></div>
        <h3>
        Part I</h3>
        <div class="well span6">
        <div>
        <label for="firstName">First name</label> <input id="firstName" name="firstName" type="text" value="">
        </div>
        <div>
        <label for="lastName">Last name</label> <input id="lastName" name="lastName" type="text" value="">
        </div>
        <div>
         <label for="email">Email</label> <input id="email" name="email" type="text" value=""> 
        </div>

        </div>

        <h3>Part II</h3>
        <div <form class="form-horizontal" role="form"> 

        <div class="well span6">
        <input class="checkbox style-2 pull-left" id="node_1" name="node_1" type="checkbox" value="y"> <label class="col-sm-3 control-label" for="node_1">Joan Johnson (Buckridge Inc)</label>
        <label for="direction_1"></label> <ul class="radio-inline" id="direction_1"><li><input id="direction_1-0" name="direction_1" type="radio" value="Choice1"> <label for="direction_1-0">Choice1</label></li><li><input id="direction_1-1" name="direction_1" type="radio" value="Choice2"> <label for="direction_1-1">Choice2</label></li><li><input id="direction_1-2" name="direction_1" type="radio" value="Choice3"> <label for="direction_1-2">Choice3</label></li></ul>
        <label for="freq_1"></label> <ul class="radio-inline" id="freq_1"><li><input id="freq_1-0" name="freq_1" type="radio" value="1"> <label for="freq_1-0">Daily</label></li><li><input id="freq_1-1" name="freq_1" type="radio" value="7"> <label for="freq_1-1">Weekly</label></li><li><input id="freq_1-2" name="freq_1" type="radio" value="30"> <label for="freq_1-2">Monthly</label></li><li><input id="freq_1-3" name="freq_1" type="radio" value="183"> <label for="freq_1-3">Yearly</label></li><li><input id="freq_1-4" name="freq_1" type="radio" value="365"> <label for="freq_1-4">More</label></li></ul> 
        </div>
        <input id="submit" name="submit" type="submit" value="Send">



                </div>

            </body>
        </html>
    </body>
</html>

I'm probably missing something rather obvious, but can't get my finger on it. Also, it's my first time using Bootstrap or any CSS styling for that matter. So that might be it

In short, What am I doing wrong?

Upvotes: 7

Views: 7724

Answers (1)

Lucien S.
Lucien S.

Reputation: 5345

I found a solution!

All I needed to do was to iterate through my radio buttons field while building the html template, like so:

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

Upvotes: 21

Related Questions