Django==1.11.7
django-crudbuilder==0.2.5
Using Bootstrap datepicker. Now trying to use the datepicker in a crud form for a date field.
In a normal Django form, this would work:
self.fields['payment_date'].widget.attrs.update({'class': 'datepicker'})
But how can the class:datepicker be set for a particular field in a crud form?
The documentation doesn't seem to mention anything useful on css or html class.
Start with implementing custom templates.
Copy over the instance templates in crudbuilder/templates/crudbuilder/instance/ into your application template directory.
Replace the template location for the included form template in all the copied over instance templates .e.g. create.html
...
{% block main_content %}
<div class='container'>
<h3>Create {{actual_model_name|title}}</h3>
<hr/>
{% include "my_app/widgets/form.html" %}
</div>
{% endblock %}
In my_app/templates/my_app/widgets/form.html, write this instead to set the datepicker class on payment_date. (Original code was copied from django-cruid)
{% load crudbuilder %}
{% include "datepicker.html" %}
<form action="." method="post" enctype="multipart/form-data" class="form-horizontal" novalidate>
{% csrf_token %}
{% for field in form %}
<fieldset class={% if field.errors %} "form-group has-error" {% else %} "form-group" {% endif %} >
{{ field|label_with_class:"col-sm-2 control-label" }}
<div class="col-xs-4">
{% if field.name == 'payment_date' %}
{{ field|input_with_class:"form-control datepicker" }}
{% endif %}
{{ field|input_with_class:"form-control" }}
{{ field.errors }}
</div>
</fieldset>
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-12">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
</form>
Finally, set your crud form to use your custom templates.
class PersonCrud(BaseCrudBuilder):
...
custom_templates = {
'list': 'my_app/list.html',
'create': 'my_app/create.html',
'detail': 'my_app/detail.html',
'update': 'my_app/update.html',
'delete': 'my_app/delete.html'
}
Related
I would like to use Bootstrap 4 forms. This means I need to add the class form-check-label to the label of a checkbox. How can I do that?
Minimal Code Sample
requirements.txt
Flask==1.0.2
WTForms==2.2.1
Flask-WTF==0.14.2
app.py:
from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import BooleanField, StringField, PasswordField, SubmitField
app = Flask(__name__, template_folder="templates")
app.config['SECRET_KEY'] = 'http://flask.pocoo.org/docs/1.0/quickstart/#sessions'
class LoginForm(FlaskForm):
username = StringField('Username')
password = PasswordField('Password')
remember_me = BooleanField("Remember Me")
submit = SubmitField('Submit')
#app.route('/')
def index():
form = LoginForm()
return render_template('login.html', form=form)
app.run()
templates/login.html:
<form action="" method="post" class="form form-horizontal" role="form">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.username.label }}<br>
{{ form.username(size=32, class_="form-control") }}<br>
{% for error in form.username.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="form-group">
{{ form.password.label }}<br>
{{ form.password(size=32, class_="form-control") }}<br>
{% for error in form.password.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
<div class="form-check">
{{ form.remember_me.label }}<br> # form-check-label
{{ form.remember_me(value='n', class_="form-check-input") }}
{% for error in form.remember_me.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>
{{ form.submit(class_="btn btn-primary") }}
</form>
The solution turned out to be super simple - I can call .label also as a function identical to the other elements:
{{ form.remember_me.label(class_="form-check-label") }}
I'm using Django form and trying to loop through the fields in my template.
I did it like this:
<form method = "post">
<span>
{% for error in form.errors %}
<p>{{ error }}</p>
{% endfor %}
</span>
{% for field in form %}
<span>
{{ field.label_tag }}
</span>
<div>
{{ field }}
</div>
{% endfor %}
{% csrf_token %}
<button type = "submit">
</form>
However, when I did this, the error field shown in the template was displayed as "all".
Beside this everything's fine with this form.
I'm wondering what's going on.
Many thanks in advance!
Try using the form like this(remember to add the CSS):
<form method = "post">
{% csrf_token %}
{% for field in form %}
{{ field.label_tag }}
{{ field }}
{{field.errors.as_text|cut:'* '}}
{% endfor %}
<button type = "submit">
</form>
I want to show contact form which i am using into
but shorcode not showing form on frontend
How can I show contact form 7 with .twig file?
<div class="our_form">
{{ wp.do_shortcode('[contact-form-7 id="766" title="Contact form 1"]') }}
</div>
<form action="{{ post.link }}" class="contact-form" method="post" {{ form_enctype(form) }}>
<div class="contact-form__row">
{% spaceless %}
{{ form_row(form.name, {}) }}
{{ form_row(form.email, {}) }}
{{ form_row(form.subject, {}) }}
{% endspaceless %}
</div>
{{ form_row(form.message, {}) }}
{{ form_widget(form) }}
<button class="btn btn--primary caps">Send</button>
</form>
how about running this like that:
{% filter shortcodes %}
[contact-form-7 id="766" title="Contact form 1"]
{% endfilter %}
Reference: https://timber.github.io/docs/guides/wp-integration/#shortcodes
Can someone help me to tranform this line:
<li>{{ form_row(form.features_reducing_value) }}</li>
to this or something like this :
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
If I understood you correctly, you want to be able to clone your form fields. In Symfony this is done using form collections and embedding them with "prototype".
More information is here -> http://symfony.com/doc/master/cookbook/form/form_collections.html
for instance to override the <input type="number" /> you do like this:
{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}
{% block integer_widget %}
<div class="integer_widget">
{% set type = type|default('number') %}
{{ block('form_widget_simple') }}
</div>
{% endblock %}
And in your html.twig file you use the from_theme like this:
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
more information about that here
I've been trying to override the form_row Twig extension so I can render a Twitter Bootstrap style row. A twitter boostrap form row should look like this:
<div class="control-group">
<label class="control-label" for="idOfMainInput">Label Name:</label>
<div class="controls">
<input type="text" id="idOfMainInput" name="someDumbName">
</div>
</div>
The base twig div style form_row block is defined in this link as below:
{% block form_row %}
{% spaceless %}
<div>
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock form_row %}
So, my thoughts were to just put the necessary divs in, and hard code where necessary the class entries (i.e. in the main div) but pass the 'attr' value to the form_label, form_errors and form_widget sections. I've taken out form_errors for now, just so I don't get too deep into it. Here's what I tried:
{% form_theme form _self %}
{% block form_row %}
{% spaceless %}
<div class="control-group">
{{ form_label(form, 'test label name', { 'attr': {'class': 'control-label'} }) }}
<div class="controls">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endspaceless %}
{% endblock form_row %}
The problem, though, is no matter what I try, the form_label extension does not use "control-label" as my class (and it should according to the source code append it if there's existing ones, like "required"). Here's what I get when I view the source of the rendered page:
<div class="control-group">
<label for="form_rsa_id" class="required">test label name</label>
<div class="controls">
<input type="number" id="form_rsa_id" name="form[rsa_id]" required="required" />
</div>
</div>
As you can see, the class="required" is there and is taken from the base form object attributes, but it should be class="required control-label", which it's not.
Kinda at a loss here, as the documentation (as well as the source) states that one should use the notation "form_label(view, label, variables)". Link to docs here.
I think you need to use label_attr rather than attr.
For anyone still looking to do this, Symfony 2.6 comes with a Bootstrap form theme which will do this for you.