I want to render out an input box as textarea with widget_tweaks in Django.
This is my code:
<div class="form-row">
<div class="form-group col-md-6">
<label>More information *</label>
{% render_field form.info class="form-control" %}
</div>
</div>
Everything is working fine, but it renders out as <input> tag. Is there any way to render it out as <textarea> without changing the models from CharField to TextField? I want to have a bigger box so there is more space to write the text. I know I can add a class that could change the size of the input box, but the textarea tag would be easier.
You can render CharField as textarea by specifying widget in your forms.py.
text = forms.CharField(widget=forms.Textarea)
or to set default width and height of textarea
text = forms.CharField(widget=forms.Textarea(attrs={"rows":3, "cols":10}))
There are two ways to incorporate this to your forms.py.
preferred way especially if you want to add widgets to multiple fields.
class MyModelForm(forms.ModelForm):
class Meta:
model = MyModel
fields= ('text', 'field2')
widgets = {
'text': forms.Textarea(attrs={"rows":3, "cols":10})),
'field2': forms.RadioSelect(attrs= {
'class': 'choice_class'})
}
Note that although widget can add class, I think it is better to add css class or id using widget-tweaks at template level rather than widget.
another way in forms.py. This way works well when you want to add widgets to one or two fields.
class MyModelForm(forms.ModelForm):
text = forms.CharField(widget=forms.Textarea(attrs={"rows":3, "cols":10})
class Meta:
model = MyModel
fields = ('text', 'field2',)
Related
There's a number of snippets to display booleans in Django Forms as checkboxes (i.e. specifying Checkbox as a widget). For instance (assuming a boolean field defined in the model for bar):
class FooForm(forms.ModelForm):
class Meta:
model = Foo
fields = ['bar']
widgets = {
'bar' : CheckboxInput(attrs={'class': 'required checkbox form-control'}),
}
However I also need to display a (disabled) checkbox in DetailView (client says so). But I can't figure out an elegant way to do this, since I don't have a form meta for details view...
My current thinking is something like this (bootstrap checkbox):
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" {% if foo.bar %}checked{% endif %} disabled>Bar
</label>
<\div>
Any way to accomplish this in a fashion closer to the Form's widgets?
in the view get you form and set initial value
get the model object and set bars initial value
form = YourForm(initial={'bar':modelObject.bar })
and then send the form to the template and simply render
like form.bar
you can disable this with many ways
like
class FooForm(forms.ModelForm):
class Meta:
model = Foo
fields = ['bar']
widgets = {
'bar' : CheckboxInput(attrs={'class': 'required checkbox form-control','disabled':'disabled or true'}),
}
or find and use any template filter to add attribute to form field
This is the html django form generated for an ImageField
<div id="div_id_image" class="form-group">
<label for="id_image" class=""> Image </label>
<div class=""> <input type="file" name="image" accept="image/*" class="clearablefileinput form-control-file" id="id_image">
</div>
Now, I can write custom html code to customize this field. But, my use-case is just to add 3 classes, one for the outer div, one for the label and one for the input field itself.
Is it possible to add these 3 classes in django form without writing any custom html code
It is possible. use "django-widget-tweaks" tools. It will give you full flexibility in your form.
check out the official documentation:
https://pypi.org/project/django-widget-tweaks/
If you want to add only class name from form.py
(you can try this but code is not tested)
from django import forms
class xyzform(forms.ModelForm):
x= forms.CharField(widget= forms.TextInput
(attrs={'class':'some_class',
'id':'some_id'}))
y= forms.CharField(widget= forms.TextInput
(attrs={'class':'some_class',
'id':'some_id'}))
class Meta:
model = xyzModal
fields = [
'x',
'y'
]
I'm wanting to add bootstrap classes to the options of a CheckboxSelectMultiple displayed with crispy forms. I know how to add a class to the whole CheckboxSelectMultiple div, but not to each of the elements within it (I'm wanting to give each a class of col-3 so they align next to each other in a neat grid).
I'm displaying the form (the form also has many other fields) with:
{% crispy form form.helper %}
and this is the form.py
TOPICS = (
('ANI', 'Animals'),
('ART', 'Art'),
('COM', 'Communication'),
('CRI', 'Crime'),
('CUL', 'Culture/Society'),
)
topics = forms.MultipleChoiceField(choices=TOPICS, required=False, widget=forms.CheckboxSelectMultiple())
Thank you.
I think you are looking forinlinecheckboxes. If you want only so many items on each row you can over ride the inlinecheckbox template with col-3 (or col-md-3?).
https://django-crispy-forms.readthedocs.io/en/latest/layouts.html#bootstrap-layout-objects
I have a form which allows you to upload an image, but I want to know if it is possible to customise the markup that Django generates.
In the model it is created as an ImageField:
logo = models.ImageField(blank=True, null=True)
In the template I am creating an 'upload' form field using
{{ form.logo }}
This is the markup that gets generated:
Currently: dog.jpg
<input id="logo-clear_id" name="logo-clear" type="checkbox">
<label for="logo-clear_id">Clear</label>
<br>Change: <input id="id_logo" name="logo" type="file">
I want to know if I can change that markup by drilling down further, so that I can for example nest the checkbox to clear the image within its label. I also would like to use my own markup to separate the option to clear the form field from the option to upload a new one. However, I can't find any documentation on how to do this. I've tried outputting
{{ logo.logo-clear }}
directly but this throws an error.
The solution was to create a custom version of the widget being used in my forms.py: https://docs.djangoproject.com/en/1.10/_modules/django/forms/widgets/#ClearableFileInput
from django.forms.widgets import ClearableFileInput
class CustomImageFieldWidget(ClearableFileInput):
template_with_clear = '<label for="%(clear_checkbox_id)s">%(clear)s %(clear_checkbox_label)s</label>'
class OrganisationProfileForm(OrganisationCreateForm):
class Meta(OrganisationCreateForm.Meta):
widgets = {
'logo': CustomImageFieldWidget,
}
I have a model with a ForeignKey field and a form to create and update the objects.
I choose the ForeignKeyField with a RadioSelect widget and loops through the radio inputs in the template with {% for radio in form.foreign_key_items %}{{ radio.tag }} - {{ radio.choice_label }}{% endfor %}.
My form is:
class ItemForm(ModelForm):
class Meta:
model = Item
fields = ('foreign_key_item',)
widgets = {'foreign_key_item': RadioSelect,}
But the choice_label is not enough information for the user to select the correct object.
How is it possible to print fields from the foreign_key_item objects when I print each radio?
You can compile all the appropriate information in the view and add it to the context that is rendering the form. Alternatively, you can probably use select_related.