Output Django Charfield as a responsive Bootstrap textarea - django

If I have a form containing a CharField and select the Textarea-widget, then I can specify the number of rows and columns for the textarea, but this output will not be responsive.
In short: How can I output my form field using Bootstrap's Textarea-widget or make the default one responsive.

what about setting max-width: 100%; on the textarea ?
EDIT after comments:
I still think the above method could be a simple and direct solution for your case, because it's easy to put that in the css and render all the forms responsive without overriding your field widget or the template for that field.
Otherwise you could consider using django-crispy-forms , and do something like:
{% load crispy_forms_tags %}
...
{{ form|crispy }}
or using the tag only on the desired field: {{ form.textfield|crispy }}
it will render your form with the bootstrap template if you set in your config CRISPY_TEMPLATE_PACK = 'bootstrap3'

Related

How can I render new HTML content in Django template?

I'm a beginner in Django.
In my template file, I have the following:
<select id="selectbox"></select>
<div id="containerdiv"></div>
Within the containerdiv, I can return a HttpResponse such as:
<form> <!-- some more input elements here --> </form>
so now I will have a new form within the div. The content of the form will change depending on the value of selectbox. However, I also have {% csrf_token %} tag within the rendered HttpResponse which is not being rendered properly. Is this even the correct way to work with Django?
You could load as many forms in the page by the following method
def formPage(request):
form1=FormA()
form2=FormB()
#as many as you want
return render(request,"example.html",{"form1"=form1,"form2":form2})
Then call the forms in the HTML pages as per the name specified in the view, and use vanilla JS to render form as per choice selected in the choice box
You can refer the following link: JS content manipulation

Django: The page shows "(<django.forms.fields.BooleanField object at ...>)" at variable location in a template

I was trying include a checkbox on my template, but it showed me some text on the browser instead.
I have a form (forms.py) that contains boolean field, e.g:
Class MyForm(forms.Form):
my_checkbox = forms.BooleanField(required=False, label='my_checkbox'),
and I have the following in my templates/my_app/my_form_template.py:
<form id="form" method="post">
{{ form.my_checkbox }}
<form>
In the browser after running the server, I've got:
(<django.forms.fields.BooleanField object at 0x0000014BE3CF9208>,)
The CharField and ChoiceField work perfectly except BooleanField. What is a way to represent a checkbox on the template?
I've tried {{ form }} in the template and it shows the checkbox, but I wish to custom the attributes of the checkbox.
There is a comma at the end of the field that causes an error. Removing it would fix the problem.

Replace a char in django template before final rendering

I want to make all of my asterisks (*) in a template in red color in a Django Template. (E.g. in form labels that * symbol points the field is required. But when putting * in label of a form field it is rendered as black color as usual.
How can I accomplish this by for example registering a filter or tag?
Note that I use some libraries (e.g. bootstrap4 form) and the page is full of {{ }} tags. BUT I want to find&replace all ;black *' with 'red *' in final rendered html page.
EDIT: I use django-bootstrap4 and so I simply use
{% bootstrap_form form %} in my templates. (So not have explicit access to label texts) How can I perform my goal?
This is what works for me
# templatetags/custom_tags.py
from django import template
register = template.Library()
#register.filter
def mark_as_required(text):
return '<span style="color:red">{text}</span>'.format(text=text)
# templates/xxx.html
...
{% load custom_tags %}
...
{{ '*'|mark_as_required|safe }}
...

Customizing Wagtail Streamfield

Can anyone provide the code necessary to create the Wagtail Streamfield options that are previewed on the wagtail.io website front page?
https://media.wagtail.io/images/w1_5pmaP1U.original.width-1600.png
Specifically, I'm interested in Aligned Image, Wide Image, Bustout, Raw HTML, and Markdown.
This page describes how to freeform page content using StreamField (blocks).
https://docs.wagtail.io/en/latest/topics/streamfield.html
You can subclass any built-in block and provide your own template:
class WideImage(ImageChooserBlock):
class Meta:
label = 'Wide image'
icon = 'image'
template = 'website/blocks/wide_image.html'
The html is up to you:
{% load wagtailimages_tags %}
{% image self width-1024 as img %}
<img src="{{ img.url }}" class="image--wide">
Ofcourse the css is up to you too.
.image--wide { width: 100% }
What the exact markup and styling should be, depends on your current frontend markup and styling.
Aligned Image, Wide Image and Bustout can be achieved in the same way. Simple markup and little css.
Raw HTML is an existing block
https://docs.wagtail.io/en/latest/topics/streamfield.html#rawhtmlblock
You can store your markdown in a TextBlock.
https://docs.wagtail.io/en/latest/topics/streamfield.html#textblock
Converting markdown to html is a three line custom string filter:
#stringfilter
def md(value):
return markdown2.markdown(value)
Use it in your template:
{% load app_tags %}
{{ self|md }}

Django Crispy forms and i18n in HTML Layout

I tried searching but could not find any answer to this, in Django crispy forms there is an HTML layout Object which allows you to inject customized HTML into your form, I am working on a CreateView Form which implements some arbitary creation of related elements, I inject the HTML under my field the following way:
HTML(
'''<p class="add">
{% trans 'Add a category' %}
</p>'''
),
My problem is that although url tags work ok, trans tags are not parsed within crispy forms, is there an alternative (maybe within crispy forms?) to maintain i18n?
In the form template there is proper i18n loading of tags:
{% load i18n %}
{% load crispy_forms_tags %}
Since you are trying to do it in some .py file (as i understood), then why do you bother with templatetags - use python.
injected_html = u"<p class='add'><a href='%(url)s'>%(translation)s</a></p>" % {'url':some_get_url_method(), 'translation':_(u"Add a category")}
HTML(injected_html)