I want to add a form so users can create a new post. So I added the following code:
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="boder-bottom mb-4">Inserat erstellen</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post</button>
</div>
</form>
</div>
{% endblock content %}
This is what it supposed to look like:
But this is what it end up looking like. I followed the steps from a Youtube Tutorial and the result looks different than mine. What am I'm missing ?
Related
<form class="text-center mt-5" action="{% url 'add' %}" method="post">
{% csrf_token %}
{% for field in form %}
<div class="row col-md-3 mx-auto mb-3">
{{field}} {% if not field.field.required %}<span class="text-light w-25">(optional)</span>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Add</button></form>
So what happens is that the button is centered but the fields are a little to the left.
how do I make it so that the fields are centered and the (optional) span goes next to the ones that it has to go next to.
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
CompanyCreateView is a generic view. The file uploads from django administration but does not upload from template.
company_logo is stored in mysql database
class CompanyCreateView(CreateView):
model = Company
fields = ['company_name', 'company_description', 'company_email',
'company_website', 'company_address', 'company_phone', 'company_status',
'company_monthly_payment', 'company_logo']
company_form.html
{% extends "super_admin/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form action="" method="POST">
{% csrf_token %}
<fieldset class="from-group">
{% if object.company_name.strip %}
<legend class="border-bottom mb-4">Update Company</legend>
{% else %}
<legend class="border-bottom mb-4">Enter New Company</legend>
{% endif %}
{{ form | crispy}}
</fieldset>
<div class="form-group">
{% if object.company_name.strip %}
<button class="btn btn-outline-info" type="submit">Update</button>
<a class="btn btn-primary" href="{% url 'super-company-delete' object.id %}" role="button">Delete</a>
{% else %}
<button class="btn btn-outline-info" type="submit">Save</button>
{% endif %}
</div>
</form>
</div>
{% endblock content %}
I have found the answer i was missing enctype in form. Just replace the form tag
<form action="" method="POST" enctype="multipart/form-data">
I am facing a problem building a django project:
the pull-right class in bootstrap 3 didn't work in django template pull-right
here is my code
{% block content %}
<div class="row">
<div class="col-sm-4 pull-right">
<h1>{{ title }}</h1>
<form method="POST" action="">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Sign Up!">
</form>
</div>
</div>
{% endblock content %}
Put a div inside your column and apply the pull-right class on that one.
<div class="col-sm-4">
<div class="pull-right">
<!-- content here -->
</div>
</div>
Why are you using columns if you want to pull it right?
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