How to place each form of a formset on a horizontal line, one below the other without using a table?
My html is putting everything on one line.
Any help much appreciated.
Html
[<div class="form-group row">
<div class="row">
{{ formset.management_form }}
{% for form in formset.forms %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="col-sm-2">
{{ form.logical_operator|as_crispy_field }}
</div>
<div class="col-sm-3">
{{ form.event|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.operator|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.event_value|as_crispy_field }}
</div>
<div class="col-md-1 align-self-center delete-form">
<button onclick="exclude(this)" type="button"
title="Excluir"
class="btn btn-danger btn-sm">
<i class="feather icon-trash-2"></i>
</button>
</div>
{% endfor %}
</div>
</div>
image from screen
This reorganization solved the problem.
Thanks for the help!
<div class="form-group row">
<div class="col-sm-12">
{{ formset.management_form }}
{% for form in formset %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="row">
<div class="col-sm-2">
{{ form.logical_operator|as_crispy_field }}
</div>
<div class="col-sm-3">
{{ form.event|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.operator|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.event_value|as_crispy_field }}
</div>
<div class="col-md-1 align-self-center delete-form">
<button onclick="exclude(this)" type="button"
title="Excluir"
class="btn btn-danger btn-sm">
<i class="feather icon-trash-2"></i>
</button>
</div>
</div>
{% endfor %}
</div>
</div>
Please try using </br> (break line) command:
<h1> HEllo</h1> </br> <h2>How are you</h2>
Related
I have a table with filters, and i want to download the rows as csv, filtered.
My function to get filters from form:
public function getFilters($request)
{
$filters = [
'stato' => $request->get('stato'),
'cliente' => $request->get('cliente'),
'registrar' => $request->get('registrar'),
'creazione_inizio' => $request->get('creazione_inizio'),
'creazione_fine' => $request->get('creazione_fine'),
'scadenza_inizio' => $request->get('scadenza_inizio'),
'scadenza_fine' => $request->get('scadenza_fine'),
'scadenza_pagamento_inizio' => $request->get('scadenza_pagamento_inizio'),
'scadenza_pagamento_fine' => $request->get('scadenza_pagamento_fine'),
];
return $filters;
}
On the page where the table is i have this code and it works fine:
/**
* #Route("/dashboard", name="dashboard")
*/
public function dashboard(Request $request, PaginatorInterface $paginator): Response
{
$filters = $this->getFilters($request);
}
But on the route to export csv i have this and $filters is always null:
/**
* #Route("/report/report.csv", name="domains_data_csv")
*/
public function exportDomainsDataCsvAction(Request $request)
{
$filters = $this->getFilters($request);
}
I have the filters form and the button to download csv on the dashboard page.
Any tips to make it work?
EDIT
My dashboard page is made like this:
<div class="mb-2">
<span class="h2">Dashboard</span>
</div>
<div class="mb-3">
{{ include('Admin/includes/_search.html.twig') }}
</div>
{{ include('Admin/includes/_filter.html.twig') }}
{% if domains %}
<div class="col-auto">
Scarica CSV
</div>
{{ include('Admin/includes/_domains_table.html.twig',{ 'domains':domains }) }}
{% if is_granted('ROLE_ADMIN') %}
<a class="btn btn-primary" aria-current="page" href="{{path('new_domain')}}" role="button">Nuovo dominio</a>
{% endif %}
{% else %}
{% endif %}
Filters form:
<div class="card">
<div class="row align-items-center">
<a class="text-decoration-none text-reset" id="filter-header" href="#collapseExample" data-bs-toggle="collapse" aria-expanded="false">
<div class="card-header d-flex align-items-center">
<h5 class="pe-3">Filtri</h5>
<div class="border-1 bg-success border border-success w-100" style="opacity:unset;"></div>
<i class="bi bi-chevron-right ps-3 fs-3 text-success arrow"></i>
</div>
</a>
</div>
<div class="collapse" id="collapseExample">
<div class="card-body">
<form id="form-filter-status" method="GET">
{% if is_granted('ROLE_ADMIN') %}
<div class="row mb-3 justify-content-center">
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Stato:</div>
<div class="col-sm">
<select name="stato" class="form-select" onchange='this.form.submit();'>
<option value="" {% if filters.stato is empty %} selected {% endif %}>Seleziona...</option>
<option value="1" {% if filters.stato == 1 %} selected {% endif %}>Attivo</option>
<option value="2" {% if filters.stato == 2 %} selected {% endif %}>Richiesta Dismissione</option>
<option value="3" {% if filters.stato == 3 %} selected {% endif %}>Dismesso</option>
<option value="4" {% if filters.stato == 4 %} selected {% endif %}>Richiesto Trasferimento</option>
<option value="5" {% if filters.stato == 5 %} selected {% endif %}>Trasferito</option>
</select>
</div>
</div>
</div>
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Cliente:</div>
<div class="col-sm">
<select name="cliente" class="form-select" onchange='this.form.submit();'>
<option value="" {% if filters.cliente is empty %} selected {% endif %}>Seleziona...</option>
<option value="1" {% if filters.cliente == 1 %} selected {% endif %}>KINETIKON s.r.l.</option>
<option value="2" {% if filters.cliente == 2 %} selected {% endif %}>CINQUEBIT s.r.l.</option>
<option value="3" {% if filters.cliente == 3 %} selected {% endif %}>JAKALA S.p.A.</option>
<option value="4" {% if filters.cliente == 4 %} selected {% endif %}>IN.SI. s.r.l.</option>
<option value="5" {% if filters.cliente == 5 %} selected {% endif %}>PAGNOSSIN s.r.l.</option>
<option value="6" {% if filters.cliente == 6 %} selected {% endif %}>ELEPHASE s.r.l.</option>
</select>
</div>
</div>
</div>
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Register:</div>
<div class="col-sm">
<select name="registrar" class="form-select" onchange='this.form.submit();'>
<option value="" {% if filters.registrar is empty %} selected {% endif %}>Seleziona...</option>
<option value="1" {% if filters.registrar == 1 %} selected {% endif %}>Register</option>
<option value="2" {% if filters.registrar == 2 %} selected {% endif %}>OpenProvider</option>
<option value="3" {% if filters.registrar == 3 %} selected {% endif %}>TowerTech</option>
<option value="4" {% if filters.registrar == 4 %} selected {% endif %}>Aruba</option>
<option value="5" {% if filters.registrar == 5 %} selected {% endif %}>Aruba Business</option>
</select>
</div>
</div>
</div>
</div>
{% endif %}
<div class="row justify-content-center">
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Creazione</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="creazione_inizio">Da:</span>
<input type="date" name="creazione_inizio" class="form-control" value="{{filters.creazione_inizio}}" placeholder="Creazione inizio" aria-label="Creazione inizio" aria-describedby="creazione_inizio">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="creazione_fine">A:</span>
<input type="date" name="creazione_fine" class="form-control" value="{{filters.creazione_fine}}" placeholder="Creazione fine" aria-label="Creazione fine" aria-describedby="creazione_fine">
</div>
<div class="d-grid gap-2">
<button class="btn btn-outline-success" type="submit">Filtra data creazione</button>
</div>
</div>
</div>
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Scadenza</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="scadenza_inizio">Da:</span>
<input type="date" name="scadenza_inizio" class="form-control" value="{{filters.scadenza_inizio}}" placeholder="Scadenza inizio" aria-label="Scadenza inizio" aria-describedby="scadenza_inizio">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="scadenza_fine">A:</span>
<input type="date" name="scadenza_fine" class="form-control" value="{{filters.scadenza_fine}}" placeholder="Scadenza fine" aria-label="Scadenza fine" aria-describedby="scadenza_fine">
</div>
<div class="d-grid gap-2">
<button class="btn btn-outline-success" type="submit">Filtra data scadenza</button>
</div>
</div>
</div>
<div class="card col-sm-3 mx-3">
<div class="card-body">
<div class="card-title">Scadenza pagamento</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="scadenza_pagamento_inizio">Da:</span>
<input type="date" name="scadenza_pagamento_inizio" class="form-control" value="{{filters.scadenza_pagamento_inizio}}" placeholder="Scadenza pagamento inizio" aria-label="Scadenza pagamento inizio" aria-describedby="scadenza_pagamento_inizio">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-2" id="scadenza_pagamento_fine">Da:</span>
<input type="date" name="scadenza_pagamento_fine" class="form-control" value="{{filters.scadenza_pagamento_fine}}" placeholder="Scadenza pagamento fine" aria-label="Scadenza pagamento fine" aria-describedby="scadenza_pagamento_fine">
</div>
<div class="d-grid gap-2">
<button class="btn btn-outline-success" type="submit">Filtra data scadenza pagamento</button>
</div>
</div>
</div>
</div>
{% if query is defined %}
<input type="hidden" name="query" value="{{query}}">
{% endif %}
</form>
</div>
</div>
To pass the current GET parameters (from URL, not form) You should be able to modify the href as follows:
Scarica CSV
To use the current form values you need to use JavaScript to set the form's action attribute value to that returned by {{ path('domains_data_csv') }} and submit the form.
i have this code with me as part of a tutorial i was following for blog post. I have a comment section on my detailview, I want it to be shown in the homepage as well. I tried with some codes, but the problem is same comments are showing in all posts (only) in homepage.
please take a look at the code.
I have a comment snippet which I use it in my homepage.
<!-- Comment showing section -->
<div class="main-comment-section">
<div class="container-fluid mt-2">
<div class="form-group row">
<!-- Comment Form -->
<form class="comment-form" method="post" action=".">{% csrf_token %}
<div class="form-group">
<textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
</div>
<button type="submit" value="submit" class="btn-sm btn-outline-light" style="color: black;">Comment</button>
</form>
<!-- Comment Form end -->
</div>
</div>
{{ comments.count }} Comment{{ comments|pluralize }}
{% for comment in comments %}
<blockquote class="blockquote">
<img style="float:left; clear: left;" class="rounded-circle article-img" height="10" width="10" src="{{ comment.user.profile.profile_pic.url }}"><h6>{{ comment.user.first_name|capfirst }} {{ comment.user.last_name|capfirst }}</h6><br>
<p style="font-size: 8px;">{{ comment.timestamp }}</p>
<p style="font-size: 14px;" class="mb-3">{{ comment.content }}</p>
<a type="button" name="button" class="reply-btn ml-4"><p style="font-size: 13px;"> Reply</p></a>
{% if request.user == comment.user %}
Delete</td>
{% endif %}
</blockquote>
{{ comment.reply.count }}
<div class="replied-comments col-md-5" style="display: none;">
{% for reply in comment.replies.all %} <!--replies is the related name in the model-->
<blockquote class="blockquote">
<img style="float:left; clear: left;" class="rounded-circle article-img" height="50" width="50" src="{{ reply.user.profile.profile_pic.url }}"><h6>{{ reply.user.first_name|capfirst }} {{ reply.user.last_name|capfirst }}</h6><br>
<p style="font-size: 13px;" class="mb-3">{{ reply.content }}</p>
</blockquote>
{% endfor %}
<div class="form-group row">
<form class="reply-form" method="post" action=".">{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
<div class="form-group">
<textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
</div>
<input type="submit" value="submit" class="btn-sm btn-outline-light" style="color: black;">
</form>
</div>
</div>
{% endfor %}
</div>
PS. The comment is correctly showing in the detail view, but in homepage its showing all the comments of all posts in every posts.
Have the following changes,
views.py
...
comments = Comment.objects.filter(post=posts_list.first()) # Delete this line
context = {
'page':page,
'posts':posts,
'tag':tag,
'actions':actions,
'comments': comments, # Delete this too
}
return render(request, 'posts/users/myhome.html', context)
Change posts/comment_section.html too,
<!-- Comment showing section -->
<div class="main-comment-section">
<div class="container-fluid mt-2">
<div class="form-group row">
<!-- Comment Form -->
<form class="comment-form" method="post" action=".">{% csrf_token %}
<div class="form-group">
<textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
</div>
<button type="submit" value="submit" class="btn-sm btn-outline-light" style="color: black;">Comment</button>
</form>
<!-- Comment Form end -->
</div>
</div>
{% if not post.comment_set.all %}
No comments to display.
{% endif %}
{% for comment in post.comment_set.all %}
<blockquote class="blockquote">
<img style="float:left; clear: left;" class="rounded-circle article-img" height="10" width="10" src="{{ comment.user.profile.profile_pic.url }}"><h6>{{ comment.user.first_name|capfirst }} {{ comment.user.last_name|capfirst }}</h6><br>
<p style="font-size: 8px;">{{ comment.timestamp }}</p>
<p style="font-size: 14px;" class="mb-3">{{ comment.content }}</p>
<a type="button" name="button" class="reply-btn ml-4"><p style="font-size: 13px;"> Reply</p></a>
{% if request.user == comment.user %}
Delete</td>
{% endif %}
</blockquote>
{{ comment.reply.count }}
<div class="replied-comments col-md-5" style="display: none;">
{% for reply in comment.replies.all %} <!--replies is the related name in the model-->
<blockquote class="blockquote">
<img style="float:left; clear: left;" class="rounded-circle article-img" height="50" width="50" src="{{ reply.user.profile.profile_pic.url }}"><h6>{{ reply.user.first_name|capfirst }} {{ reply.user.last_name|capfirst }}</h6><br>
<p style="font-size: 13px;" class="mb-3">{{ reply.content }}</p>
</blockquote>
{% endfor %}
<div class="form-group row">
<form class="reply-form" method="post" action=".">{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
<div class="form-group">
<textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
</div>
<input type="submit" value="submit" class="btn-sm btn-outline-light" style="color: black;">
</form>
</div>
</div>
{% endfor %}
</div>
I am trying to save data in ORM via a form but when I click on the submit button all it does is refresh the page with the same data.
HTML
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy form %}
{% load widget_tweaks %}
{% block content %}
<h2 class="mb-3">Add a Warehouse</h2>
<div class="row">
<form method="post" class="col-md-12 proct-form" novalidate>
{% csrf_token %}
<div class="form-group col-md-4 mb-0">
{{ form.owner|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_name|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_email|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_contact|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_city|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_pincode|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_state|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_pan|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_gst|as_crispy_field }}
</div>
<div class="form-group col-md-12 mb-0">
<button type="submit" class="btn btn-success">Save</button>
Nevermind
</div>
</form>
</div>
{% endblock %}
Views.py
#method_decorator([login_required, employee_required], name='dispatch')
class WarehouseFormView(CreateView):
model = Warehouse
fields = "__all__"
template_name = 'packsapp/employee/warehouseForm.html'
def form_valid (self, form):
product = form.save(commit=False)
product.save()
messages.success(self.request, 'The Warehouse was created with success!')
return redirect('employee:warehouse_table')
Is there a problem with my views.py or do I need to change my templates?
All the other forms in the app are created the same way and they work fine
I created a sign up form by extending Django's UserCreationForm. Since Django adds all HTMLs by default I can't put my own HTML in it, just to customize it a bit.
This is how my current signup form looks like:
you can see password and password confirmation are added one after another. I would like to show them side by side, something like this:
I don't know where to add my HTML to make it look like the one above, this is my signup.html here:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
No one answered my question within last 36 hours. Finally just now I find an answer to my own question. So I am answering my own question, maybe someone in the future read it and find it useful.
After adding my custom HTML and CSS I finally manage to show two password fields side by side like this:
I used django-widget-tweaks to achieve this result:
as you can see in above picture, two password fields are added side by side. Moreover, errors are shown as well.
this was the previous html form:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
Now the HTML codes look like this one below, the code pretty much explains itself. So I don't feel to elaborate it. I used bootstrap 4.
{% block content %}
<div class="accountform">
<form method="POST">
<h4 class="display-6 text-white p-3">Create your account</h4>
{% csrf_token %}
<div class="alert alert-danger p-0" style="border:none;">
{% for field in form.visible_fields %}
{% for error in field.errors %}
<span class="err">{{ error }}</span><br>
{% endfor %}
{% endfor %}
</div>
<div class="form-group">
<label for="id_username">Username</label>
{% render_field form.username class='form-control' placeholder='John Doe' %}
</div>
<div class="form-group">
<label for="id_email">Email</label>
{% render_field form.email class='form-control' placeholder='johndoe#email.com' %}
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="id_password1">Password</label>
{% render_field form.password1 class='form-control' placeholder='****' %}
</div>
<div class="form-group col-md-6">
<label for="id_password2">Confirm Password</label>
{% render_field form.password2 class='form-control' placeholder='****' %}
</div>
</div>
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
</div>
</div>
{% endblock content %}
dont' forget to add {% load widget_tweaks %} at the top of your template.
Thanks
I have a bootstrap form which consists of basic input fields and a few textarea's. Im using Django for my form validation and am having a persistent problem aligning validation labels under the textarea's. This form is only using bootstrap css modules so there is no custom css interfering with it as far as i can tell.
Example: The date and time field align perfectly as the notes validation label does not.
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well well-lg">
<form class="form-horizontal" action="" autocomplete="off" method="post">
{% csrf_token %}
{% for field in UserForm %}
<div class="form-group">
<label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
<div class="col-md-6">
{{ field }}
</div>
{% for error in field.errors %}
<div class="col-md-6">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
</div>
{% endfor %}
</form>
</div>
</div>
</div>
The number of columns inside the class="row" does not add up to 12. Try rewriting the form-group part like this:
<div class="form-group">
<label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
<div class="col-md-6">
{{ field }}
{% for error in field.errors %}
<p>
<strong>{{ error|escape }}</strong>
</p>
{% endfor %}
</div>
</div>