<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.
Related
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 trying to use django tinymce in my project but the font is too small. I have googled it and learned I am meant to use content_css but without proper step by step approaches as to how exactly this should be done.
I am wondering if there was another way and if there isn't, could someone give me a simple step by step approach to solving it using the content_css.
Below is the forms.py
class PostForm(forms.ModelForm):
text = forms.CharField(help_text='Enter your Post here', widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))
name = forms.CharField(widget=forms.HiddenInput(), initial='User')
created_on = forms.DateTimeField(widget=forms.HiddenInput(), initial=timezone.now())
class Meta:
model = Post
fields = ('title', 'text',)
{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block body_block %}
<!-- <h1>TinyMCE Quick Start Guide</h1>
<form method='post'>
<textarea id = 'mytextarea'>Hello, World!</textarea>
</form> -->
{% if post %}
<div class="single">
<div class="container">
<div class="col-md-8 single-main">
<div class="single-grid">
<h4>{{ post.title|safe }}</h4>
<img src="{% static 'images/post1.jpg' %}" alt=""/>
<p>{{ post.text|safe }}</p>
</div>
<div class="comments">
<h2><u>Comments</u></h2>
{% if comments %}
{% for comment in comments %}
<h3>~{{ comment.commenter.first_name|title}} {{comment.commenter.last_name|title }}</h3>
<ul>
<li>
{{ comment.text|safe }}
</</li><br>
</ul>
<span class="hidden-xs"style="margin-left:70%;, font-family:Arial">Published: {{ comment.created_on }}</span >
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete</button>
{% endif %}
{% endfor %}
{% else %}
No comments available
{% endif %}
</div>
<div class="content-form">
<h3>Leave a comment</h3>
{% if user.is_authenticated %}
<form id="comment_form" action="{% url 'blog:detail' post.slug %}" method="post">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
{{ field.errors }}
{{ field }}<br/><br/>
{% endfor %}
<input class="btn btn-primary" type="submit" name="submit" value="submit">
</form>
{% else %}
You must be logged in to comment
{% endif %}
</div>
<ul class="comment-list " >
<h5 class="post-author_head">Written by {{ post.author.first_name|title }} {{ post.author.last_name|title }}</h5>
<li><img src="{% static 'images/avatar.png' %}" class="img-responsive" alt="">
<div class="desc">
<p>View all posts by: {{ post.author.first_name|title }} {{ post.author.last_name|title }}</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
<div class="col-md-4 side-content">
<div class="recent">
<h3>RECENT POSTS</h3>
{% if recent_posts %}
<ul>
{% for post in recent_posts %}
<li>{{post.title|title }}</li>
{% endfor %}
</ul>
{% else %}
<li>No post has been posted</li>
{% endif %}
</div>
<div class="comments">
<h3>RECENT COMMENTS</h3>
{% if recent_comments %}
<ul>
{% for comment in recent_comments %}
<li>{{comment.commenter|title}} on {{comment.post|title}}</li>
{% endfor %}
</ul>
{% else %}
<li>No comments at the moment</li>
{% endif %}
</div>
<div class="clearfix"></div>
<div class="archives">
<h3>ARCHIVES</h3>
<ul>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete Post</button>
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Edit Post</button>
{% endif %}
{% else %}
asadsh
{% endif %}
{% endblock %}
To add content css files to tinymce, you have to change the tinymce.init object value to include your content_css.
Search for the initialization call in your script and add a line to your object like in this example:
tinymce.init({
...
content_css: [
'//example.com/js/your-css-here.css'
],
...
});
If a content_css part is already present, just add the URL to the array, i.e.
['url 1 here', 'url 2 here', 'your new url here']
In your custom css file, you can now set your desired font size, i.e.
body { font-size: 14px; }
I'm using https://github.com/dyve/django-bootstrap3 plugin for my project with following code
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="post" class="form-inline">
{% csrf_token %}
Input: {% bootstrap_field form.input layout='inline' %}
Object: {% bootstrap_field form.object layout='inline' %}
<input type="submit" class="btn btn-xs btn-primary" value="Submit"/>
</form>
</div>
</div>
</div>
And get this fields as result How can i control width of them?
I tried to change it in .css file, but it only works with focus .form-control:focus {width: 320px}
Solved by addition "id": "input-form" to form widget and adjusting #input-form in .css file.
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