my Question is: I want do a condition in Django Template with css but it didnt work.
<label>{% if not typ.required %}
{% trans 'Bitte Auswahl treffen' %}{% endif %}</label>
<input type="checkbox" {% if typ.required %} style="display:none;" checked="checked"
{% endif %} name="checkbox"
data-toggle="toggle" id="{{ typ.typ_id }}"
value="{{ cookie_id }}" />
{% if typ.required %} style="display:none;" checked="checked"{% endif %}
checked="checked" works but the Style not.
If i press f12 to watch the site i see this style in the input type
Thank you guys
i find the solution. The div above overwrite the style of the checkbox :-)
Related
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'm trying to add flags to my dropdown for i18n, so far I've tried adding an img tag and using as background image but none of them seem to work
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
{% get_current_language as LANGUAGE_CODE %}
<form action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ redirect_to }}">
<select name="language" id="" class="icon-menu">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{language.code}}"
{% if language.code == LANGUAGE_CODE %} selected {% endif %}
{% if language.code == "en-gb" %}
style="background-image:url(/static/img/en-gb.png);" alt="english">english
{% elif language.code == "pt-br" %}
>portugues<img src="/static/img/pt-br.png" alt="">
{% else %}
{{ language.name_local }}
{% endif %}
</option>
{% endfor %}
</select>
<input type="submit" value="{% trans 'Go' %}">
</form>
</li>
you should consider using a 3rd javascript library like select2 (https://select2.org/).
To learn more why refer to this doc from Mozilla (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS) :
The element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.
I'm new in flask. When you use QuerySelectMultipleField in the jinja2 it shows as a drop-down select-box. but I don't like the drop-down and I prefer the options to be visible permanently without drop-down like checkbox. Is it possible?
Lets assume you have a queryselectmultiplefield for a field named 'answer'
{% for item in form.answer %}
<div>
<input type="checkbox" name="{{ item.name }}" value="{{ item.data }}">
{{ item.label }}
</div>
{% endfor %}
I created a custom template tag in Django called text_field
#register.inclusion_tag('form_field_tags/text_field.html')
def text_field(field, prefix=None, field_type=None, attr=None, **kwargs):
return {
'field': field,
'prefix': prefix,
'field_type': field_type,
'placeholder': '',
'attrs': parse_attrs(attr)
}
Where parse_attrs is a function that takes as input something like this class=form-control mb-4, v-model=property_name.
{% text_field form.property_name attr="class=form-control mb-4, v-model=property_name" %}
parse_attrs then create a dictionary of HTML attribute and value that can be looped over, so in my text_field.html i can loop over all the attrs passed in from the text_field custom template tag
<label >
{% if field.field.required %}
<strong> {{ field.label }} <span> * </span> </strong>
{% else %}
{{ field.label }}
{% endif %}
</label>
<input
{% if field_type == "password" %}
type="password"
{% else %}
type="text"
{% endif %}
{% for attr, val in attrs.items %}
{{ attr }} = {{ val }}
{% endfor %}
name="{% if prefix %}{{prefix}}-{% endif %}{{ field.name }}"
placeholder="{{ placeholder }}"
id="{% if prefix %}{{prefix}}-{% endif %}{{ field.name }}"
{% if field.field.required %}
required="required"
{% endif %}
{% if field.value %}
value="{{ field.value }}"
{% endif %}>
However, when I try to refresh the browser and see the rendered output what I get is
<input type="text" class="form-control mb-4" name="property_name" placeholder="" id="property_name" required="required">
instead of this
<input type="text" v-model="property_name" class="form-control mb-4" name="property_name" placeholder="" id="property_name" required="required">
Any thoughts on how to go about this?
So I realized that the browser I was using (Firefox Dev) wasn't showing the v-model directive when viewed with the browser inspector nevertheless if you look at the HTML that gets sent in the browser through the network tab, the v-model directive is definitely there so Vue.js would recognize it.
I am looking to slightly edit the default password_reset_form.html provided by django-registration. The current output is:
I would like to remove the 'E-mail address:' label and put a 'placeholder' text inside the input box. How can you accomplish this? I can't seem to find documentation on form.email or form.email.errors.
Password_reset_form.html is shown below:
{% extends "registration/registration_base.html" %}
{% load i18n %}
{% block title %}{% trans "Reset password" %}{% endblock %}
{% block content %}
<p>
{% blocktrans %}
Forgot your password? Enter your email in the form below and we'll send you instructions for creating a new one.
{% endblocktrans %}
</p>
<form method="post" action="">
{% csrf_token %}
{{ form.email.errors }}
<p><label for="id_email">{% trans 'E-mail address:' %}</label> {{ form.email }} <input type="submit" value="{% trans 'Reset my password' %}" /></p>
</form>
{% endblock %}
{# This is used by django.contrib.auth #}
you can use this package.
So your code will look like this.
{% extends "registration/registration_base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% block title %}{% trans "Reset password" %}{% endblock %}
{% block content %}
<p>
{% blocktrans %}
Forgot your password? Enter your email in the form below and we'll send you instructions for creating a new one.
{% endblocktrans %}
</p>
<form method="post" action="">
{% csrf_token %}
{{ form.email.errors }}
<p> {{ form.email|attr:"placeholder:E-mail address:" }} <input type="submit" value="{% trans 'Reset my password' %}" /></p>
</form>
{% endblock %}
{# This is used by django.contrib.auth #}