Using the following code to render a form:
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<form action="{% url 'chartboard:chart_url' %}" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form layout='inline' %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
</div>
</div>
Here is the output:
And here it is when removing layout='inline'
Datepicking is done by adding a custom class upon form creation with form widgets and using a jquery datepicker (if that is of any relevance at all)
Why are field labels being hidden in the first case?
Why isn't the entire form displayed in a single line when opting for inline display?
Working with python 3.4 and the following venv:
Django==1.8.11
django-bootstrap3==7.0.1
flake8==2.5.4
mccabe==0.4.0
numexpr==2.5
numpy==1.10.4
pep8==1.7.0
pyflakes==1.0.0
requests==2.9.1
tables==3.2.2
You need to change the class of your <form> element to class="form-inline" and it should work. It doesn't seem to appear in the docs but check the example inline form on GitHub.
Related
I have a template in flask,and I want that a button will be showed inside a form element.
Basically what I'm trying to do is to show comment one after another with edit button between comments (according to the user that is login now).
This is the relevant part of the template:
<div id='containerComment'>
{% for comment in comments_post %}
<div class='show_comment'>
<p>{{ comment['body'] }}</p>
<p class="about">by {{ comment_publishers[loop.index0] }} on {{ comment_times[loop.index0]}}</p>
</div>
{% if comment_publishers[loop.index0]==g.user['username'] %}
<form action="{{ url_for('blog.update_comment', id=comment['id'] )}}" method="get" id='Edit'>
<button name="edit" value='edit' id='toEdit' class='bo' type="submit" style='background-image: linear-gradient(#37ADB2, #329CA0)'>Edit</button>
</form>
{% endif %}
{% endfor %}
</div>
All comments are showing with form element containing the edit button after them,except first comment, which is only button alone without form containing him.How to solve this?
All comments have after them (except first comment):
<form>
<button></button>
</form>
First comment has after it:
<button></button>
Edit:
If I do this:
{% if comment_publishers[loop.index0]==g.user['username'] %}
{% if loop.index0==0 %}
<form>
</form>
{% endif %}
<form action="{{ url_for('blog.update_comment', id=comment['id'] )}}" method="get" id='Edit'>
<button name="edit" value='edit' id='toEdit' class='bo' type="submit" style='background-image: linear-gradient(#37ADB2, #329CA0)'>Edit</button>
</form>
{% endif %}
Then it showing the form containing the edit button after the first comment,but somehow it don't show the empty form element when I check in developer tools.When I enter text in this empty form,it showing only this text without form.Very strange.Need explanation for why it always erasing the first form of my loop.
I have django-bootstrap-datepicker-plus set up in my app. Upon completion, I noticed that my form fields are stacked on rows screenshot whereas I would love to manually render some of the fields on the same row. Although I know the reason for that is because the form is rendered using {% bootstrap_form form %}
Here is my rendered template code snippet below.
{% extends 'accounts/no_header_footer.html' %}
{% block content %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<div class="profile-create-form-container">
<form class="profile-create-form" data-certificates-url="{% url 'ajax_load_certificates' %}"
data-grades-url="{% url 'ajax_load_grades' %}"
data-relationships-url="{% url 'ajax_load_relationships' %}" data-states-url="{% url 'ajax_load_states' %}"
enctype="multipart/form-data"
id="ProfileCreateForm"
method="POST" runat="server">
{% csrf_token %}
<fieldset class="form-group text-center">
<span class="navbar-brand">
<img alt="..." height="40px" src="..." width="40px">
Basic Information
</span>
</fieldset>
{% bootstrap_form form %}
<div class="container">
<div class="text-center">
<button class="btn btn-dark" type="submit">
<i class="fa fa-save"></i> Save and Continue
</button>
</div>
</div>
</form>
</div>
The question I have is, is it possible to render each form field manually?
I was able to solve this issue by using {% bootstrap_field field %} as explained in this doc
I've installed Userena, and I am trying to figure out how to integrate the existing userena form with my own custom HTML form template, I have pasted part of the code for the userena form template, and I do not see ANY css or html, so I'm very confused about how I would integrate this with my own template consisting of HTML, CSS. I figured with Django I'd be able to take any old HTML form and just plugin Django's variables to get it working.
So my question is how can I integrate the top example (userenas form template) into the bottom example (generic HTML example). An example might be helpful.
{% block content %}
<form action="" method="post">
{% csrf_token %}
<fieldset>
<legend>{% trans "Signup" %}</legend>
{{ form.non_field_errors }}
{% for field in form %}
{{ field.errors }}
{% comment %} Displaying checkboxes differently {% endcomment %}
{% if field.name == 'tos' %}
<form action="/register/" method="post" role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" id="nameinput" placeholder="Name" name="contact-name">
</div>
<div class="form-group">
<input type="email" class="form-control input-lg" id="emailinput" placeholder="Email" name="contact-email">
</div>
I'm trying to use the app django-dynamic-formset to allow users to add more than one media object at the end of a form.
I'm following the demo here.
https://github.com/elo80ka/django-dynamic-formset/blob/master/docs/usage.rst
I managed to get this to work but then changed to using crispy form and it's no longer working.
The "add another" text isn't appearing aver the first inline formset.
The template looks like this.
<form id="dtuForm" enctype="multipart/form-data" action="." method="post" >
{% csrf_token %}
{{ formset.management_form }}
{% crispy form %}
<fieldset class="" id="formaddtest" >
{% for formset in inlines %}
<div id = "media_object">
{% for subform in formset.forms %}
{{ formset.management_form }}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add Link / Downloadable File</h3>
</div>
<div class="panel-body">
{% crispy subform %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</fieldset>
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
I'm starting to suspect that I'm not putting the media_object selector in the right place but I'm not sure where to put it now that I'm using crispy forms so any help or pointers is useful to me.
Thanks
i have a formset as follows:
EduFormSet = formset_factory(forms.CandidateDegreeForm, can_delete=True)
edu_formset = EduFormSet(prefix='candidate_degree')
in the templates i am doing the following:
{% if edu_formset %}
{% for form in edu_formset %}
<div class="formset-form" style="visibility: visible;">
<form id="{{ form.prefix }}" method="POST" action="/degree/add/">
<h4>Some Heading Here</h4>
{% csrf_token %}
{% for field in form %}
{% include "form_field.html" %}
{% endfor %}
</form>
<script type="text/javascript">
jQuery(document).ready ( function(){
jQuery('{{ form.prefix }}').validationEngine();
});
</script>
<div class="clearfix"></div>
</div>
{% endfor %}
{{ edu_formset.management_form }}
<div class="button-container right">
<input class="button" type="submit" value="submit" />
</div>
{% endif %}
I am not sure why but nothing really happens when i hit the submit button.
Your submit button is not within the form, so the action is not triggered by the click!
Here's how the docs show you to render formsets:
<form method="post" action="">
<!-- Notice how the formset (below) and thus its submit button
is INSIDE the form (above) -->
{{ formset.management_form }}
<table>
{% for form in formset %}
{{ form }}
{% endfor %}
</table>
</form>
You try to create multiple forms with the form.prefix for id. This could work but each form would have to be rendered with its own submit button. Formsets are designed to combine multiple forms into one and guarantee uniqueness of value names by said prefix. They would be enclosed in a singe form and share any submit triggers.