I am using django-easy-select2 to handle the entering of data into several manytomanyfields within a model - titled Engagement.
I am using bootstrap and crispy forms to render the Engagement form to HTML.
The rendering is broadly working as expected/required. However, the size of form fields for manytomany data are initially very small and require data to the selected/entered, before they expand. Once data is entered the fields do expand. But, I would like these fields to initially render as the size set by bootstrap.
For example, I've set bootstrap as col-6, but the initial render of the manytomany is only col-1 or even less. When data is entered that field will expand up to col-6 and no further, which good, but I would like the field to start at col-6, even with no data.
Relevant code is below.
engagements.view:
class EngagementCreateView(CreateView):
model = Engagement
form_class = select2_modelform(Engagement, attrs={'width': 'auto'}) # this sets the widths of the field
template_name = "engagements/engagement_create.html"
def form_valid(self, form):
print(form.cleaned_data)
return super().form_valid(form)
create engagement template
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<h4>{% if form.instance.pk %}Edit engagement{% else %}Create new engagement{% endif%}</h4>
<div class="form-group">
<form method="post" novalidate>
{% csrf_token %}
<div class="row mt-1">
<div class="col-6"> # I'm rendering the width of fields here
{{ form.date|as_crispy_field }}
{{ form.projects|as_crispy_field }}
{{ form.stakeholders|as_crispy_field }}
{{ form.ppdds|as_crispy_field }}
</div>
<div class="col-6">
{{ form.follow_up_date|as_crispy_field }}
{{ form.engagement_types|as_crispy_field }}
{{ form.engagement_workstreams|as_crispy_field }}
</div>
</div>
<div class="row mt-1">
<div class="col-lg">
{{ form.summary|as_crispy_field }}
</div>
</div>
<br>
<input class="btn btn-primary" type="submit"
value="{% if form.instance.pk %}Save{% else %}Create{% endif%}">
<a class="btn btn-primary" href="../">Cancel</a></p>
</form>
</div>
{% endblock %}
I think the most relevant part of the django-easy_select2 documentation is here https://django-easy-select2.readthedocs.io/en/latest/usage.html.
Related
How can I add attribute autocomplete="off" to the input login template form for an admin?
I'm find this in the login.html template but can't find where is the form template
<div class="form-row">
{{ form.username.errors }}
{{ form.username.label_tag }} {{ form.username }}
</div>
If you need to change behavior based on whether or not the user is admin/staff:
{% if request.user.is_staff %}
<form autocomplete="off" method="post" action="action_name">
<input autocomplete="off" name="hidden" type="text" style="display:none;">
{% else %}
<form method="post" action="action_name">
{% endif %}
<div class="form-row">
And complete the rest of the form as you would.
Reference for the form and input tags to turn autocomplete off (note autocomplete is "off" in the input tag as per testing in comments):
https://gist.github.com/niksumeiko/360164708c3b326bd1c8
I would like to customize my django forms.
For example, in my code I have working hour settings which I like to produce like this format:
mon_start mon_end
tue_start tue_end
....
but instead it creates a form
mon_start
mon_end
tue_start
tue_end
....
Here is a view of the output that I dont want
Below are my code:
forms.py
class CompanyWorkingHoursSettingsForm(forms.ModelForm):
mon_start = forms.TimeField()
mon_end = forms.TimeField()
tue_start = forms.TimeField()
tue_end = forms.TimeField()
class Meta:
model = Workinghours
fields = ("mon_start","mon_end","tue_start","tue_end")
workinghourssettings.html
{% extends 'project/base.html' %}
{% load bootstrap3 %}
{% block page %}
<div class="col-lg-12">
<div class="panel">
<div class="panel-heading bg-blue">
<h4 class="panel-title text-center text-white">
Working Hours Settings
</h4>
</div>
<div class="panel-body">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{% bootstrap_form company_workinghourssettings_form %}
<button type="submit" class="btn btn-pink">Update</button>
</form>
</div>
</div>
</div>
{% endblock %}
How do i produce a custom arranged form for my form fields above ? (in bootstrap)
As suggested in the comments you may try rendering your fields one by one, and apply bootstrap grid:
<form>
<div class="row">
<div class="col-md-6">{{ my_form.field_1 }}</div>
<div class="col-md-6"{{ my_form.field_2 }}></div>
</div>
....
</form>
If the problem is with the placeholder you can just use
mon_start =forms.TimeField(label='the label', widget=forms.TextInput(attrs={'placeholder': 'What ever you want here'}))
I want to render only fields in a Django inline_formset.
This is my template:
<div id="storage">
<h1>Storage</h1>
{% for form in storage_formset %}
<div class="form-group">
<label class="col-sm-2 control-label">{{ form.help_texts }}</label>
<div class="col-sm-10">
{{ form.errors }}
{{ form }}
</div>
</div>
{% endfor %}
</div>
And this is my form:
help = {'field1' : "help1", 'field2' : "help2"}
StorageFormSet = inlineformset_factory(WorkOrder, Storage, min_num=0,
max_num=2, validate_min=True, validate_max=True, extra=1, help_texts=help,
fields=('field1', 'field2'))
This one works, but when it renders, it renders everything (field and field name) in the form and I want it to only render the field. Other thing is that the help_texts don't work (I don't know if I'm using it right).
If I use:
{{ form.field1 }}
It renders field1, but I want to do it dynamically, so I don't have to repeat again and again.
And if I use:
{{ form.fields }}
It renders a bunch of code
OrderedDict(
[('field1', <django.forms.fields.TypedChoiceField object at 0x7f8f6409c890>),
('field2', <django.forms.fields.IntegerField object at 0x7f8f6409c650>),
(u'id', <django.forms.models.ModelChoiceField object at 0x7f8f6409c1d0>),
(u'DELETE', <django.forms.fields.BooleanField object at 0x7f8f6409cc90>),
('parent_field', <django.forms.models.InlineForeignKeyField object at 0x7f8f659c4e10>)])
I don't know what else to do.
Thank you if you can help me.
I modified your code to only render fields and their associated help texts:
<div id="storage">
<h1>Storage</h1>
{% for form in storage_formset %}
<div class="form-group">
<label class="col-sm-2 control-label">{{ form.help_texts }}</label>
<div class="col-sm-10">
{{ form.errors }}
{% for field in form %}
{{ field }} {{ field.help_text }}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
For more information about accessing form fields in a template visit the docs.
I have a list called forms which I am passing to a Django (1.5.1) template:
<div class="content">
{% if forms %}
<form method="POST" enctype="multipart/form-data" class="survey">
<div class="image">
{{ forms.0.as_p }}
</div>
<div class="questions">
{% for form in forms %}
{{ form.as_p }}
</div>
{% endfor %}
<input type="submit" value="Submit Survey"/>
</form>
{% endif %}
<div class="content">
I want to do two separate things:
Put the first element of the forms list inside a div tag with class="image".
Put the rest of the elements inside a div tag with class="questions"
There are SO questions about how to reference list items by index inside a django template, but forms.0.as_p doesn't render anything for me. Also, how to get a sublist of items from forms (something like forms[1:])?
EDIT
While the question has been correctly answered below, I'll add another way of doing it using slice.
<form method="POST" enctype="multipart/form-data" class="survey">
<div class="image">
{{ forms.0.as_p }}
</div>
<div class="questions">
{% with myforms=forms|slice:"1:"%}
{% for form in myforms %}
{{ form.as_p }}
{% endfor %}
{% endwith %}
</div>
Use the forloop.first variable to determine the first form in the list:
{% for form in forms %}
<div class="{{ forloop.first|yesno:'image,question' }}">
{{ form.as_p }}
</div>
{% endfor %}
P.S. You don't need it for this case but to get the sublist in the template you can use the slice template filter.
Below is my form code :
class FMessage(forms.Form):
From = forms.CharField()
To = forms.CharField()
Subject = forms.CharField()
Message = forms.CharField()
and this is my html code:
<form method='POST' action='.'>
{% csrf_token %}
{{ form.as_p }}
<input type='submit' value='submit'>
</form>
The code works fine by displaying forms and has not any issue in functionality, but now I need to wrap my form fields in html by a div like this:
<div id='mydiv'>
<input ... />
<div>
How can I fix it?
Seems like you do not really want to use the inbuilt <p> or <table> wrapped forms and rather want to display the fields wrapped within a <div>'s. You can simply iterate over fields in the form as follows.
{% if form %}
<!-- Form Errors -->
{% if form.errors %}
<ul class="errors">
{% for error in form.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
<!-- Display Form -->
<form>
{% csrf_token %}
{% for field in form %}
<div class="mydiv">
<label class="mylabel">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
</form>
{% endif %}
Dont render the form by using form.as_p. You need to show each field of the form, for example, by using form.to. By using this way, you can wrap the field 'to' into a div
<div>{{ form.To}} </div>
For more detail, view this link