I am trying to put some text in a textarea using a template variable like this:
{% if action == 'edit' %}
<form>
<textarea style='width: 420px; height: 65px'>
{{ post.text }}
</textarea>
</form>
{% endif %}
However, I notice that the text is displayed with some initial whitespace that I can't remove. I tried creating a filter to .strip() the text before showing to the user but to no avail. Although the text is stripped from whitespace it does display with some space characters before the first letter.
Is there a solution for this?
try not to put space in your code
<textarea style='width: 420px; height: 65px'>{{ post.text }}</textarea>
Related
I have created a Q&A website in Django I want to print text in the same format as it entered
This is the text
This is on a new line
It should print in this format as it is entered but it prints like this
This is the text This is on a new line
my forum.html code
<div class="card-body cardbody">
<p>{{post.post_content|truncatewords:"10"|linebreaks}}</p>{% if post.post_content|length|get_digit:"-1" > 50 %}
<button class="btn btn-light" style="color:blue; font-size: 13px;">Show more </button>
{% endif %}
</div>
please help me to do this
The documentation for truncatewords mentions:
Newlines within the string will be removed.
Hence you need to use the linebreaks filter first and then instead of truncatewords you should use truncatewords_html:
{{ post.post_content|linebreaks|truncatewords_html:10 }}
<div class="col-sm-2">
{{ adminform.form.writer }}
</div>
In the above code there is no input tag how to insert placeholder named 'writer' using css?
Generally, you will not get input placeholder feature in div. Simply You give a placeholder if the data is empty in div.
add a placeholder attribute in your element.
<div class="col-sm-2" placeholder="Write"> {{ adminform.form.writer }}</div>
In css you can check :empty and get value from attribute
div[placeholder]:empty:after {
content: attr(placeholder);
}
Hope this will help you.
I am currently rendering several Flask fields (SelectFields, InputFields) using the following jinja2 template:
<div>{{ wtf.form_field(form.blockingProbability) }}</div>
This results in the following format:
I'd like to control the width of the dropdown list (narrower width would look more natural, methinks), but (unsurprisingly) when I try doing this by controlling the div width, the entire field, including the label is constrained and the label text wraps around.
Is there any way to control the width of the dropdown field (and other input fields), while keeping the width of the label intact (unwrapped)?
This worked for me
jinja2 template:
<div style="width: 50%">
{{ form1.language.label }}
</div>
<div style="width: 25%">
{{ form1.language }}
</div>
This is the form1 class:
class myForm(Form):
language = SelectField(u'Programming Language', choices=[('cpp', 'C++'), ('py', 'Python'), ('text', 'Plain Text')])
This should work too and it also maintain the visual consistency with other fields' widths:
<div>{{ wtf.form_field(form.blockingProbability, horizontal_columns=('lg', 2, 4)) }}</div>
The last value - 4 - in horizontal_columns sets the width of the input field.
When the Jinja2 code is rendered to HTML it will fill in a bunch of attributes on each form field. For your example, if you examine the page after it renders it should look something like:
<div>
<label for='blockingProbability'>
Blocking Probability
</label>
<input id='blockingProbability' name='blockingProbability' ... >
</div>
So you can control the fields and labels as a group or individually by adding some CSS into your Jinja2 template head:
<head>
<style type="text/css">
input {
width: 20px;
}
</style>
</head>
I have a form with textfields in Django, and users enter texts line by line.
When I look at the entries in admin side, I saw exactly how user wrote it but when I display it on my website, in Django templates, it just joins the sentences and I couldn't display the text line by line anymore.
To illustrate, user enters text as
-bla
-bla1
-bla2
However, it looks like in my page as
-bla1-bla2-bla3
This is my code in the template:
<div>
<p>
{{ rev.myTextField }}
</p>
</div>
In HTML, newlines between text don't imply a newline in display; you need to use HTML to insert the newline. The most straightforward way is with the <br /> tag, although there are other methods as well.
Django has a template filter for this: use |linebreaks. Here's the Documentation.
So, change:
{{ rev.myTextField }}
to:
{{ rev.myTextField|linebreaks }}
Try "safe" tag
{{ rev.myTextField|safe }}
using
{{ rev.myTextField|linebreaks }}
disables <small> tag, its better to use
{{ rev.myTextField|linebreaksbr }}
it just put <br> tag, not <p>
I am using a form which is generated for me by django. I'm using this as a comment form after a post in my blog.
Currently it renders fine but it's not nicely aligned.
This is what I have.
This is what I'd like.
Thanks
edit: This is the result when I user {{ form.as_table }}
I know it's a little late, but for everybody else you can try this
<table>
{{ form.as_table }}
</table>
It fixes the annoying formatting problem, and looks decent.
Posting my solution hoping it'll help someone else oneday.
I knew that you'd style the fields with css but wasn't sure how to assign the classes to each item. But if you take a look at the default template provided you'll notice that the error class is assigned to a field using an if statement within a foreach loop that automatically generates each field within your form.
i.e.
{% for field in form %}
< p{% if field.errors %}
class="error"
{% endif %}
{{ field.label_tag }}<'/' p>
{% endfor %}
So I added onto this functionality.
< p{% if field.errors %}
class="error"
{% endif %}
{% ifequal field.name "honeypot" %}
id="hide"
{% else %}
id="left"
{% endifequal %}>
{{ field.label_tag }}<'/' p>
my css being
#hide{
display:none;
}
#left{
width: 200px;
text-align: left;
}
#right{
width: 300px;
text-align: left;
}
Now that you can set your classes you can easily setup your classes or id within your css file. This is for the comments.
If you're using a {{ form.as_p }} or {{ form.as_table }} to generate your form then you just set a general form class within your css to style it.
i.e.
form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}
Have a look at Customizing the form template. This is one possible solution.
Maybe you can simply use CSS to style your form and render the form as you like. (i.e as_table()).
Using the default {% render_comment_form for app.model %} will generate:
<p>
<label for="id_name">Name</label>
<input id="id_name" type="text" name="name" maxlength="50">
</p>
<p>
<label for="id_email">Email address</label>
<input type="text" name="email" id="id_email">
</p>
... etc
Therefore, you can target label in your CSS stylesheet using:
label {
width: 15%;
}
There are multiple approaches as detailed in this post, however, I found that sometimes widget attributes may not work the way you wanted.
Still, the best and easy way is to use CSS:
Render your page that contains the form fields and do some inspection (right click>inspect or F12 on Chrome for example) to know what html tags your form generates when rendered. Then you can write your CSS easily.
You have input and textarea fields in your form so your CSS will be:
input, textarea{
width:350px;
}
Don't forget to call for your CSS file at the top of your html template:
<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">
Here is a snapshot of what I have for my own form: