I'm building a database front end and working on the search page. I'd like to show the radio buttons as horizontal, not vertical. I'm using Crispy Forms in Django and am aware of the simple InlineRadios function within the Formhelper Layout.
For whatever reason, it refuses to display horizontally. Thinking it maybe related to css somewhere, I even removed all css and it STILL displayed horizontally. I have researched this problem with as many queries as I can imagine, but to no avail.
forms.py
from django import forms
from crispy_forms.bootstrap import InlineRadios, Field, InlineCheckboxes
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Div, Row, Column
length_overall_choices = [('Any', 'Any'), ('0-5', '0-5'), ('6-10', '6-10'), ('11-15', '11-15'), ('16-20', '16-20'),
('21-25', '21-25'), ('26-30', '26-30'),
('31-35', '31-35'), ('36-40', '36-40'), ('41-45', '41-45'), ('46-50', '46-50')]
price_choices = [('Any', 'Any'), ('1', '$0-$1,000'), ('2', '$1,000 - $5,000'),
('3', '$5,001 - $10,000'), ('4', '$10,001 - $20,000'),
('5', '$20,001 - $30,000'), ('6', '$30,001 - $40,000'),
('7', 'More than $40,000')]
condition_choices = [('Any', 'Any'),
('salvage', 'Salvage'),
('fair', 'Fair'),
('good', 'Good'),
('like new', 'Like New'),
('excellent', 'Excellent'),
('new', 'New')]
manufacturer_choices = [('0', 'Any'),
('1', 'Jeanneau')]
boat_year_choices = [('0', 'Any'),
('1', '1900-1920'),
('2', '1921-1940'),
('3', '1941-1960'),
('4', '1961-1980'),
('5', '1981-2000'),
('6', '2001-2020')]
location_choices = [('Any', 'Any'),
('Alaska', 'Alaska'),
('Alabama', 'Alabama'),
('Arkansas', 'Arkansas'),
('Arizona', 'Arizona'),
('California', 'California'),
('Colorado', 'Colorado'),
('Connecticut', 'Connecticut'),
('District of Columbia', 'District of Columbia'),
('Delaware', 'Delaware'),
('Florida', 'Florida'),
('Georgia', 'Georgia'),
('Hawaii', 'Hawaii'),
('Iowa', 'Iowa'),
('Idaho', 'Idaho'),
('Illinois', 'Illinois'),
('Indiana', 'Indiana'),
('Kansas', 'Kansas'),
('Kentucky', 'Kentucky'),
('Louisiana', 'Louisiana'),
('Massachusetts', 'Massachusetts'),
('Maryland', 'Maryland'),
('Maine', 'Maine'),
('Michigan', 'Michigan'),
('Minnesota', 'Minnesota'),
('Missouri', 'Missouri'),
('Mississippi', 'Mississippi'),
('Montana', 'Montana'),
('North Carolina', 'North Carolina'),
('North Dakota', 'North Dakota'),
('Nebraska', 'Nebraska'),
('New Hampshire', 'New Hampshire'),
('New Jersey', 'New Jersey'),
('New Mexico', 'New Mexico'),
('Nevada', 'Nevada'),
('New York', 'New York'),
('Ohio', 'Ohio'),
('Oklahoma', 'Oklahoma'),
('Oregon', 'Oregon'),
('Pennsylvania', 'Pennsylvania'),
('Puerto Rico', 'Puerto Rico'),
('Rhode Island', 'Rhode Island'),
('South Carolina', 'South Carolina'),
('South Dakota', 'South Dakota'),
('Tennessee', 'Tennessee'),
('Texas', 'Texas'),
('Utah', 'Utah'),
('Virginia', 'Virginia'),
('Vermont', 'Vermont'),
('Washington', 'Washington'),
('Wisconsin', 'Wisconsin'),
('West Virginia', 'West Virginia'),
('Wyoming', 'Wyoming')]
class SearchForm2(forms.Form):
condition = forms.ChoiceField(label="Condition",
widget=forms.RadioSelect,
choices=condition_choices,
initial='Any',
)
year = forms.ChoiceField(label="Year",
widget=forms.RadioSelect,
choices=boat_year_choices,
initial='0',
)
length_overall = forms.ChoiceField(label="Overall Length",
widget=forms.RadioSelect,
choices=length_overall_choices,
initial='Any',
)
price = forms.ChoiceField(label="Price",
widget=forms.RadioSelect,
choices=price_choices,
initial='Any',
)
location = forms.ChoiceField(label="Location",
widget=forms.Select,
choices=location_choices,
initial='Any',
)
manufacturer = forms.ChoiceField(label="Manufacturer",
widget=forms.RadioSelect,
choices=manufacturer_choices,
initial='0',
)
def __init__(self, *args, **kwargs):
super(SearchForm2, self).__init__(*args, **kwargs)
self.helper = FormHelper()
# self.helper.form_id = 'id-SearchForm'
self.helper.form_class = 'bootstrap4'
self.helper.form_method = 'post'
self.helper.form_action = 'found'
self.helper.layout = Layout(InlineCheckboxes('price'))
self.helper.add_input(Submit('submit', 'Search'))
search.html
{% extends 'sloop/base.html' %}
{% block content %}
<section class="page-section" id="body-content">
<main role="main" class="container">
<div class="px-3 py-3 pt-md-5 pb-md-4 col-md-8">
{% load crispy_forms_tags %}
{% crispy form form.helper%}
</div>
</main>
</section>
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Your Sail - Mokupea</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<link rel="shortcut icon" href="{% static 'favicon.ico' %}"/>
{% include 'sloop/base/css.html' %}
{% include 'sloop/base/fonts.html' %}
{% include 'sloop/base/js.html' %}
</head>
{% load crispy_forms_tags %}
<body class="d-flex flex-column">
<div id="page-content">
<!-- navbar -->
<nav class="navbar navbar-expand-lg fixed-top ">
<a class="navbar-brand" href="{% url 'index' %}"><img
src="{% static 'sloop/img/navbar-logo.svg' %}"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-4">
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" data-value="search" href="{% url 'search' %}">Search</a></li>
<li class="nav-item"><a class="nav-link " data-value="analysis" href="{% url 'analysis' %}">Pricing Analysis</a></li>
<li class="nav-item"><a class="nav-link " data-value="blog" href="{% url 'profile' %}">Profile</a></li>
<li class="nav-item"><a class="nav-link " data-value="team" href="{% url 'logout' %}">Logout</a></li>
</ul>
{% else %}
<li class="nav-item"><a class="nav-link" data-value="register" href="{% url 'register' %}">Register</a></li>
<li class="nav-item"><a class="nav-link " data-value="login" href="{% url 'login' %}">Login</a></li>
</ul>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock content%}
</div>
<footer id="sticky-footer" class="bg-light">
<div class="container text-center">
<div class="col-md-2"></div>
<div class="col-md-8 text-lg-left">Copyright © Mokupea.com 2021 •
<a class="mr-3" href="#">Privacy Policy</a> •
<a class="mr-3" href="#">Terms of Use</a>
</div>
<div class="col-md-2"></div>
</div>
</footer>
<script>
{% block scripts %}
{% endblock scripts%}
</script>
</body>
</html>
It always renders like this:
"This is our most desperate hour. Help me, Obi-Wan (stackoverflow) Kenobi. You're my only hope."
Princess Leia (programming Django with Crispy Forms)