Menu
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:
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?
384
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
Bootstrap 5 Radio component. A Radio Button is a component used to allow a user to make a single choice among a number of options (whereas Checkboxes are used for selecting multiple options).
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
Defining Radio Group in HTML We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected. Following is an example of radio buttons with different names within a form.
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 %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With