i am using the double curly brackets to import variables into my html from my python code. I was inquiring on how to add class to these curly brackets in order to modify the variable in css. Here is a piece of code I am working on.
<div>
{{ form.username.label(class ='username-label') }}
<div>
{% if form.username.errors %}
{{ form.username }}
<div>
{% for error in form.username.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.username }}
{% endif %}
</div>
I tried to add class into the form.username.label in order to change the appearance of the label but it doesnt work. Is there a way to do it. I want it specifically for that label and not the whole div. I hope the only solution is not to add another div tag to the variable
Let's see, whether I get you correctly.
{{ form.username.label(class_='username-label') }}
should become
{{ form.username.label(class_='username-label with-errors') }}
in case the form is invalid.
I'd approach it with
<div>
{% if form.username.errors %}
{{ form.username.label(class ='username-label with-errors') }}
{% else %}
{{ form.username.label(class ='username-label') }}
{% endif %}
<div>
{% if form.username.errors %}
{{ form.username }}
<div>
{% for error in form.username.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.username }}
{% endif %}
</div>
</div>
Also you could use actual <label> and an <ul> for improving semantics.
Edit: Added underscores, so class_ is applied in a Flask template correctly.
Related
I don't understand where to add the class name so I can change the background color of the checkbox.
form.py
DOMAINS = ['Bakeries', 'Bars and Pubs', 'Butcher Shops', 'Electronics', 'Fashion', 'Fish Shops',
'Flowers', 'Furniture', 'Gelaterias and Sweets', 'Pets', 'Other', 'Restaurants and Cafés', 'Sport',
'Supermarkets', 'Vegetables and Fruits']
class MultiCheckboxField(SelectMultipleField):
widget = widgets.ListWidget(prefix_label=False)
option_widget = widgets.CheckboxInput()
class BuyerForm(FlaskForm):
address = StringField(label='Address', validators=[InputRequired()])
domains_fields = [(x, x) for x in DOMAINS]
domains = MultiCheckboxField(label='Domains', choices=domains_fields)
radius = DecimalRangeField(label='Radius (KM)', default=5, validators=[InputRequired()])
submit = SubmitField(label='Search')
buyer_form.html
<div class="form-group">
{{ form.domains.label(class="form-control-label") }}
{% if form.domains.errors %}
{{ form.domains(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.domains.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.domains(class="form-control form-control-lg") }}
{% endif %}
</div>
I'm looking where to add:
CSS file
.container input:checked ~ .checkmark {
background-color: #e86875;
}
(I took it from w3school)
First of all, the part of the CSS you've taken from the example code will not work on its own. When you look at the complete example, it actually removes the original checkboxes and replaces them with new ones done entirely in CSS so they can look and behave a certain way. This means you will need to include the entire CSS code to make the checkboxes look like in the example and change color when selected.
Once you have that done, you can put this in your buyer_form.html code:
<div class="form-group">
{{ form.domains.label(class="form-control-label") }}
{% if form.domains.errors %}
{{ form.domains(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.domains.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{% for domain in form.domains %}
<label class="container">{{ domain.label() }}
{{ domain() }}
<span class="checkmark"></span>
</label>
{% endfor %}
{% endif %}
</div>
I googled for this, and the radio button should have the same 'name' attribute to allow only a single value to be chosen.
So I did, and It's still allowing me to choose multiple values...
I used HTML and Jinja2 templates for this, so the code might be looking a bit strange..
{% if search_keyword == None: %}
<p>Please enter your search keyword</p>
{% else: %}
{% for i in range(0, 10) %}
<form method="POST" action="./search">
<h2>
<input type="radio" name="selected_food" id="{{ i }}" value="{{ search_data["hits"][i]['recipe']['label'] }}">
{{ search_data["hits"][i]['recipe']['label'] }}
</h2>
<h4>
Calroies: {{ '%0.2f'| format(search_data["hits"][i]['recipe']['calories']) }} kcal
</h4>
{% for j in range(0, 40) %}
<p>{{ search_data['hits'][i]['recipe']['ingredientLines'][j] }}</p>
{% endfor %}
</form>
{% endfor %}
{% endif %}
In the above code the loop is creating multiple forms. This is the reason why you're able to select multiple values in radio.
If you can modify your code like this, it will work
{% if search_keyword == None: %}
<p>Please enter your search keyword</p>
{% else: %}
<form method="POST" action="./search">
{% for i in range(0, 10) %}
<div>
<h2>
<input type="radio" name="selected_food" id="{{ i }}" value="{{ search_data["hits"][i]['recipe']['label'] }}">
{{ search_data["hits"][i]['recipe']['label'] }}
</h2>
<h4>
Calroies: {{ '%0.2f'| format(search_data["hits"][i]['recipe']['calories']) }} kcal
</h4>
{% for j in range(0, 40) %}
<p>{{ search_data['hits'][i]['recipe']['ingredientLines'][j] }}</p>
{% endfor %}
</div>
{% endfor %}
</form>
{% endif %}
I have a form with 2 CharFields. Both have label="xyz".
If I use this form in a formset, the lables are not shown in the HTML
I have tried looking at the rendered HTML and the label is missing. I have tried just a form and that works.
Forms:
class WindingVoltsSpecifier(forms.Form):
winding_name = forms.CharField(max_length=20, label="Winding name")
voltages = forms.CharField(max_length=20, label="Voltages")
View:
def add_mains_transformer_primary_configs(request):
# Add a new config
# Create the formset, specifying the form and formset we want to use.
# From https://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html
VoltsSpecifierFormSet = formset_factory(WindingVoltsSpecifier)
if request.method == 'POST':
pass
else:
mt_config_form = MainsTransformerConfiguration()
volts_formset = VoltsSpecifierFormSet()
context = {
'mt_config_form' : mt_config_form,
'volts_formset' : volts_formset,
}
return render(request, 'designer/mains_configs.html', context)
Template:
{% extends 'designer/base.html' %}
{% load crispy_forms_tags %}
{% block title %}configuration{% endblock %}
{% block content %}
{% load static %}
<h1>Configuration</h1>
<form method="post">
{% csrf_token %}
{{ mt_config_form|crispy }}
{{ volts_formset.management_form|crispy }}
{% for volts_form in volts_formset %}
<table>
{% for form in volts_form %}
{{ form }}
{% endfor %}
<table>
<!--<div class="volts-formset">
{{ volts_form.winding_name }}
{{ volts_form.voltages }}
</div>
-->
{% endfor %}
{% if volts_formset.non_form_errors %}
{% for error in volts_formset.non_form_errors %}
{{ error|escape }}
{% endfor %}
{% endif %}
<input type="submit" value="Update Profile" class="button" />
</form>
<script>
$('.volts-formset').formset({
addText: 'add winding',
deleteText: 'remove'
});
</script>
{% endblock %}
I would expect the label to be beside the field.
Labels are not rendered with fields, you will have to do a {{ FIELD.label_tag }}.
It will be something like this:
<table>
{% for field in volts_form %}
{{ field.label_tag }}
{{ field }}
{% endfor %}
<table>
More info: Looping over the forms fields - Django documentation
Hope this solution to works!
{% for field in volts_forms %}
{{ field.name}} <!-- label name -->
{{ field }}<!-- ex. input -->
{% endfor %}
I want that a message gets displayd if no search results are found but somewho im doing it wrong! Is
if post in object_list.count == 0
unsuitable?
My Django template:
{% extends 'quickblog/base.html' %}
{% block content %}
{% if post in object_list.count == 0 %}
<p>No results, sorry :(</p>
{% else %}
{% for post in object_list %}
<div class="post">
<h1><u>{{ post.title }}</u></h1>
<p>{{ post.content|linebreaksbr }}</p>
<div class="date">
<a>Published by: {{ post.author }}</a><br>
<a>Published at: {{ post.published_date }}</a><br>
<a>Category: {{ post.category }}</a><br>
<a>Tag(s): {{ post.tag }}</a>
</div>
</div>
{% endfor %}
{% endif %}
having trouble nesting the following code. Where am I going wrong?
I just want to have some events show if the day is monday and then within that each event has a number of stars so I want to have another if statement that pulls that amount of stars and displays the correct image.
Here is my code.
<div class="row">
{% for event in site.nottingham_events %}
{% if event.day == "Monday" %}
<div class="event-guide-event">
<img class="event-guide-event--thumbnail" src="/img/thumb.jpg"
alt="">
<h2>{{ event.name }}</h2>
<p>When: {{ event.time }}</p>
<h3>Where: {{ event.bar }}</h3>
<h3>Hosted By: {{ event.brand }}</h3>
{% if event.stars =="3" %}
<img src="/img/events/3-stars.png" alt="Everyone">
{% endif %}
{% if event.stars =="2" %}
<img src="/img/events/2-stars.png" alt="Enthusiasts and
Beginners">
{% endif %}
{% if event.stars =="1" %}
<img src="/img/events/1-star.png" alt="Expert">
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
I resolved it by changing my logic, because you can't nest if statements in Liquid.