I have a loop that fills the page with pictures but they do so vertically.
{% for i in range(amount) %}
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img src="/static/assets/img/uploaded/coro.png" />
</div>
</div>
</div>
{% endfor %}
</div>
How do i make it so that the pictures fill the entire page in a grid?
Your images are lining up in a column because all your <img> tags are under a parent column. And the reason why the right side part is empty and the single image is not covering the entire width is due to the size of the image.
To answer your question on how to make an image grid covering the entire width, my idea will be to contain all the images inside a div and use n columns
<div class="images">
{% for i in range(amount) %}
<img src="/static/assets/img/uploaded/coro.png" />
{% endfor %}
</div>
and the CSS will be
.images {
/* Prevent vertical gaps */
line-height: 0;
column-count: 5; /* this depends on size, no.of images and viewport(for making it responsive) */
column-gap: 0px;
}
.images img {
width: 100% !important;
height: auto !important;
padding: 3px;
}
Related
I'm trying to add a "loader" while my flask application runs a task.
Here is my HTML for for my button
{% extends "base.html" %}
{% block head %}
{# <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/leaf.css') }}"> #}
{% endblock %}
{% block content %}
<div id="loader"></div>
<div id="vo_budget_file_settings">
{# Upload Final CRO Budget File #}
<p>Please upload the final CRO budget File</p>
<form class="" action="/generatecleanbudgetfile" method=POST enctype=multipart/form-data>
<input type="file" name="data_file" accept=".xls, .xlsx, .xlsm"/>
<input type="submit" value="Begin Format" onclick="loading();"/>
</form>
</div>
<script type="text/javascript">
function loading(){
$("#loader").show();
}
</script>
{% endblock %}
Here is the CSS that I've added:
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Any ideas on how to call this correctly?
Make it visible from the start, without ever showing it with javascript. Then hide it with js like so:
$(document).ready(() => {
$("#loader").hide();
})
EDIT: I now realize you said on button click in the title. I am assuming you want to hide the loading screen on button click? If not correct me in a comment. Otherwise, use this code:
$("#button").click(() => {
$("#loader").hide();
})
P.S.
Your script should be at the bottom of the body, and your CSS and JS (and my code) reference #loader, when the body has <div id="loading">
as you can see my list aligns some kind randomly and i dnot know why. Any ideas?
html:
{% if shop_name %}
<ol>
{% for library in shop_name %}
<li>Video Library Info</li>
<ul>
<li>Name : {{library.shop_name}}</li>
<li>Adress : {{library.adress}}</li>
{% comment %} <button id="btn_goto" onclick="">Select</button> {% endcomment %}
</ul>
{% endfor %}
</ol>
{% else %}
<p>ERROR</p>
{% endif %}
css code:
body {
text-align: center;
color: #FFA000;
background-color: #911E42;
}
ol {
display: table;
text-align: left;
margin: 0 auto;
margin-bottom: 20px;
}
ul {
display: table;
margin: 0 auto;
vertical-align: baseline;
text-align: left;
}
so at css i typed that text in list should be aligned on left side but still it does'nt help and it aligns randomly as i think. The thing i need to perfom is to align every li from ul on left side
Deleting display: table; might make your life easier and if that does not work. Try using display: flex on the parent and using justify-content: center; and align-items: center; to have it in the middle
Delete the display: table from the ul selector and everything should be properly aligned.
Actually I am creating a Basic E-Commerce Flask Application.
Data of the price, discount and everything is provided from content.json file to the function in python from where it goes to home.html file such that each product's data is represented in specific boxes.
It currently looks like this..
I just added random data here for reference...
Here I want all the boxes to be placed in a grid of 2 or 3 columns depending upon the width of the screen.
I have placed all the boxes generated from the jinja for loop in the boxes class.
<div class="boxes">
{% for item in data %}
<div class="card bg-dark text-white" style="width: 23rem;">
<div class="card-body">
<h5 class="card-title">{{item}}</h5>
<h6 class="card-subtitle mb-2 text-muted">Category: {{item.split(" ")[len(item.split(" "))-1]}}s</h6>
<p class="card-text" id="cut">Actual Price: {{data[item].price}} Rupees</p>
<p class="card-text">New Price: {{round(((100-data[item].discount)/100)*data[item].price)}} Rupees</p>
<p class="card-text">Discount: {{data[item].discount}}%</p>
<p class="card-text">Ratings: {{ data[item].rating }}⭐</p>
Buy Now
Product Details
</div>
</div>
</div>
but, when I applied grid properties and styles in 'boxes' class it seems to work only on the first box like the margin etc, and not in the other boxes.
Like this:
see here it's only applied to first box
I think it's because of the dynamic data generated due to jinja for loop that's causing this issue, and I don't know how to solve this.
the style for 'boxes' class:
.boxes {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
}
So yeah the main problem is how to apply this grid to all the boxes present in the boxes class
How can I set the label of a checkbox to the left side of the checkbox instead of to the right side with plotly dash?
In Excel (VBA) the 'Horizontal-align' variable allows you to place the label differently with respect to the checkbox, but I can't seem to find a similar option for Dash.
This is what I get
But this is what I want
You can always wrap your input and labels into a div where you make the parent class position: relative and then having the input and label as position: absolute
Example HTML:
<div>
<form class="formclass">
<div class="inputContainer">
<input class="inputClass" type="checkbox"></input>
<label class="labelClass">Label1</label>
</div>
<div class="inputContainer">
<input class="inputClass" type="checkbox"></input>
<label class="labelClass">Label2</label>
</div>
<div class="inputContainer">
<input class="inputClass" type="checkbox"></input>
<label class="labelClass">Label3</label>
</div>
</form>
</div>
Example CSS:
.inputContainer{
position:relative;
height: 50px;
width: 80px;
}
.labelClass{
position: absolute;
}
.inputClass{
position: absolute;
right: 0;
}
I want to create multipleselecetfild that each selection referin to each choice appears below the image.
I used the django MultiSelectField to create a form to have multiple select options.
These are my files:
models.py
class Profile(models.Model):
cat_choices = (
('Internships', 'Internships'),
('Scholarships', 'Scholarships'),
('EntranceExams', 'EntranceExams'),
)
category=MultiSelectField(choices=cat_choices,default='none')
profile.html
<!DOCTYPE html>
<html>
<body>
<style>
div.item {
vertical-align: top;
display: inline-block;
margin-right: 50px;
text-align: center;
width: 120px;
}
img {
background-color: grey;
}
.caption {
display: block;
}
</style>
<div class="item">
<img src="internship.png">
<span class="caption"><input type="checkbox" name="Internship" value="Internship"></span>
</div>
<div class="item">
<img src="jobs.png">
<span class="caption"><input type="checkbox" name="Jobs" value="Jobs"></span>
</div>
<div class="item">
<img src="scholarship.png">
<span class="caption"><input type="checkbox" name="Scholarship" value="Scholarship"></span>
</body>
</html>
I created a form called profile_form with the category field.
In html, I wanted my form to appear with an image on the top and just a check button below the image, with the check button refering to each cat_choices in the category. Something like this
!In the image I used html to display it.
How do I write this html page in django such that each check button refering to each choice appears below the image?