I would like to be my select input and button on the same line.
This i can get to work, but my input is stretched to the col width and not the input width.
How can i achieve this?
my code so far:
<form action="{% url 'register_user' %}" method="post">
{% csrf_token %}
<div class="row">
{% for field in filter_form %}
<div class="col-md-9">
<div class="form-group">
{{ field|addcss:"form-control" }}
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary btn-sm">Filter</button>
</div>
{% endfor %}
</div>
</form>
What am i missing?
Side note: is there some way to make my button a bit wider than the text in it?
First you need to understand what the following code does. It creates a column of width 9/12 the width of the page.
<div class="col-md-9">
You might wan to do the following.
<div class="col-md-9">
<div class="form-group">
{{ field|addcss:"form-control" }}
<button type="submit" class="btn btn-primary btn-sm">Filter</button>
</div>
</div>
Give explicit width to the button. Check online to give width inline
Related
I'm building a simple portfolio website where the owner will be able to manage a gallery page, Adding, Editing and Removing posts. I am printing the images from the DB using a for loop and need a way in order to get either the name of the image or the ID of the image and send the value back to the route in order to delete the row from the DB. Any suggestion would be much appreciated.
Additional information:
Using Flask w/ SQLalchemy & WTforms
Sample of how I'm displaying the images and accompanying data:
{% for image in Posts | reverse %}
<div class="row pt-3">
<div class="col">
<img class="img-fluid rounded" src="static/gallery_images/{{image.image }}" alt="">
</div>
</div>
<div class="row pt-4">
<div class="col">
<h3 style="display: inline">{{image.title}}</h3>
<p class="font-italic text-muted" style="display: inline">
{% if image.sold_flag %}
- Sold
{% else %}
- Available
{% endif %}
</p>
<p class="text-muted">{{image.date_posted.strftime('%d/%m/%Y')}}</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="font-weight-normal">{{ image.description }}</p>
</div>
</div>
<div class="row">
{% if current_user.is_authenticated %}
<div class="col text-left">
<button type="button" class="btn btn-dark">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
{% endif %}
</div>
<hr class="border">
{% endfor %}
There are multiple ways to store the id and use it for a route call. Using purely what you have shared, you can add a call to the button to the respective endpoints:
Assuming you have a method images.delete(id) to delete images and that you want to keep with the button tag on your code:
<a href={{url_for('delete.edit', id=image.id)}}>
<button type="button" class="btn btn-dark">
Delete
</button>
</a>
However, I would really recommend for you to use a form to submit the delete, as opposed to a GET request generated above. This way you can have it secured with WTForm CSRF token.
Example:
HTML
<form action="{{url_for('delete.edit', id=image.id)}}" method="POST" role="form">
{{ form.hidden_tag() }}
</form>
Python
## Make sure to create the delete form
class DeleteImage(Form):
pass
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 create a bootstrap modal that can be included in my html files since I'm putting forms in modal and I don't want to create a new mdoal everytime.
It works fine, except for trying to include the form. Which is of course the important part. How could I include a template context variable inside a template tag?
modal_base
{% load crispy_forms_tags %}
<div id="{{ modal_form_id }}" class="modal fade" ariahidden="True">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h1 style="text-align:center;">
{{ modal_form_title }}
</h1>
</div>
<div class="modal-body">
<form method="{{modal_form_method|default:'POST'}}" action="{{modal_form_action}}">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Create"/>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-danger" data-dismiss="modal">
Cancel
</a>
</div>
</div>
</div>
</div>
Example include in some html file:
{% include 'modal_form.html' with modal_form_id="new-category" modal_form_title="Create a New Category" modal_form_method="POST" modal_form_action="/home/" form={{category_form}} %}
form = {{category_form}} is the issue. Is there a way to get around this?
The modal renders fine, opens closes etc I just can't pass in the form
You're close! the only thing missing is that you don't need the curly braces to include it within the include tag
{% include 'modal_form.html' with modal_form_id="new-category" modal_form_title="Create a New Category" modal_form_method="POST" modal_form_action="/home/" form=category_form %}
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 have a problem with the modal and django form, i try a lot of thing and still doesn't show up the form in the modal, i have this
main.html
<html>
...
<button class="btn btn-info" data-toggle="modal" data-target="#contactModal">Añadir Nuevo Cake</button>
{% include 'nuevocake2.html' %}
...
</html>
nuevocake2.html
<div class="modal" id="contactModal" >
<form class="well" method="post" action="/nuevocake" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Añadir nuevo Cake</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{ formulario.as_p }}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
</div>
</form>
</div>
I already see this post How do I insert a django form in twitter-bootstrap modal window? and i follow the same steps and nothing, if anyone can help me i appreciate it, if you need more data or code let me know
EDIT: I cut all the Django/python code because is not the problem here, if anyone need to see it, let me know and i'll put it back.