The Django UserCreationForm is very useful and easy to use functionally, however, it just throws everything onto the page so all the TextFields are in one line.
Is there anyway to layout and style the form? Specifically to put labels and input fields on a new line and possibly make it possible to apply some CSS to the whole form and individual parts of the form.
Use BoundField and custom filters, and correct names of attributes of UserCreationForm class
Uses the BoundField class to display HTML or access attributes for a single field of a Form instance. And add CSS with a filter in the templatetags folders with an __init__.py, if have error remember add templatetags in your INSTALLED_APP like to 'app.name.templatetags' like:
{{ form.username.label_tag }}
{{ form.username|addclass:'form-control' }}
{{ form.password1.label_tag }}
{{ form.password1|addclass:'form-control' }}
{{ form.password2.label_tag }}
{{ form.password2|addclass:'form-control' }}
View source
https://github.com/django/django/blob/master/django/contrib/auth/forms.py
The passwords are named 'password1' and 'password2'
Every django form has three methods:
as_p()
as_ul()
as_table()
See the outputting forms as html section in the docs. You can style this output as you want.
If you want even more control over form's html then read this section of the same documentation.
In your forms.py,you can inherit UserCreationForm and set css style.(How to set css for forms CSS styling in Django forms)
Related
I have forms.py file with usercreation form inside of it. It works just fine, but the only way I can display fields in it(first_name, last_name, username, email, password and password confirmation is by writing {{ form.as_p }}. I want to display it the way I could style it. Are there any ways to do that?
You can add the css style by using form widgets
class BasicForm(forms.Form):
first_name = models.CharField(...,
widget=forms.TextInput(attrs={'class' : 'myclass'})
last_name = models.CharField(...,
widget=forms.TextInput(attrs={'class' : 'myfieldclass'})
later use class css design
You can write your own HTML at various degrees of granularity. It's described in the documentation.
Crispy Forms is a widely used package that makes fancy form layout a lot easier. Also you can do most of the work in Python by coding a Crispy Layout object, rather than by writing a complicated HTML template.
I'm reading a very large API, one of the fields I need, have "a" tags embedded in the item in the dictionary and when I pull it into my template and display it, it shows the "a" tags as text.
exp:
"Bitcoin uses the SHA-256 hashing... ...such as Litecoin, Peercoin, Primecoin*"
I would like to wrap this in HTML so when it displays on the page it has the actual links rather than the 'a' tags and the URL.
What I'm looking to get:
"Bitcoin uses the SHA-256 hashing... ...such as Litecoin, Peercoin, Primecoin*"
I figured it out, I used the Humanize function with the |safe tag.
Pretty simple answer.
In the settings.py add 'django.contrib.humanize' to the INSTALLED_APPS:
**INSTALLED_APPS = [
'django.contrib.humanize', ]**
In the HTML Template add
{% load humanize %}
For the data you want to format use |safe
{{ location.of.data|safe }}
This will read the text as HTML.
So, I am working on a html email template and I see this code.
What does it mean when it says:
<div style='{{container}}'></div>
what do the two curly brackets within the style tag indicate?
its angular.js code
angular.js uses {{ }} to bind variables to HTML,
in your condition, the CSS style class name is stored in the variable "container" and then used in the code
This way the application programmer can change the style class of the div from JAVASCRIPT easily based on different conditions
if you don't need dynamic styles, just remove the {{container}} part and replace it with the CSS style class name you have
static version will be somthing like this:
<div style='myCLassName'> .... </div>
Maybe you work on laravel views. So in blade {{ }} means < ?php ?>
In this case it was set "container" in controller and was passed to view as variable.
I'm using jinja to render a flask-wtf submit button as follows:
{{ wtf.form_field(form.submit) }}
This results in a button formatted in btn-default bootstrap format (white). I'd like to change this to btn-success bootstrap format (green).
How can I achieve this?
As suggested by #dpgaspar the solution was to use button_map as follows:
{{ wtf.form_field(form.submit, button_map={'submit':'success'}) }}
If you are using wtf.quick_form, use the form like this.
{{ wtf.quick_form(form, button_map={'submit':'success'}) }}
I presume you are also using flask-bootstrap.
On the flask-bootstrap Jinja2 macros you have:
{% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
{{field(class='btn btn-%s' % button_map.get(field.name, 'default'), **kwargs)}}
{% endcall %}
You should use if you can the button_map to do it [see details in comments below]
If you are using flask-bootstrap, use the form with button_map as suggested by #dpgaspar,
For whole form - wtf.quick_form:
{{wtf.quick_form(delete_form, button_map={'name_of_field': 'danger'})}}
For individual field, wtf.form_field:
{{wtf.form_field(delete_form.delete, button_map={'delete': 'success'})}}
Flask-Bootstrap official documentation says:
button_map – A dictionary, mapping button field names to names such as primary, danger or success. Buttons not found in the button_map will use the default type of button.
This feels like a really silly issue, but I'm confused by the behavior of django-zinnia, a blog creation module.
When I test enter a plain text post, it appends each sentence with html < p > tags the browser doesn't read as html.
Example, if I enter this into the database (no html):
The entry from the db renders on page itself like this as if the < p > markup was plain text:
Within Zinnia, these html tags are being generated as part of the {{ object_content }} object in _entry_detail_base.html
<div class="entry-content">
{{ object_content }}
</div>
I've looked through the entry.py models within Zinnia and I'm having trouble identifying where these tags are coming from or how they're being passed in in a way the browser doesn't interpret them for what they are (html). Is there a filter I can apply that might solve this? thanks
That's the default behavior for Django templates. Use {{ object_content|safe }} or {% autoescape off %} {{ object_content }} {% endautoescape %} (for multiple variables) to prevent html entities from being escaped.
Note that using the safe filter doesn't automatically mean the output is not escaped if you use another filter after it.
Check the Zinnia's source code: https://github.com/Fantomas42/django-blog-zinnia/blob/master/zinnia/templates/zinnia/_entry_detail_base.html
It's using |safe template tag:
<div class="entry-content">
{{ object_content|safe }}
</div>