I'm currently working with Django, and i'm doing a view, where multiple objects from a list are displayed. Right now, each of those objects is on an own line. But i want to have e.g. 2 on one line, so the list is less long on the page.
This is my Code so far:
html:
{% for plant in plants %}
<div class="plant">
<img src="{{plant.icon}}">
<div>
<label>{{plant.common_name}}</label>
<input type="number" name="percentage"/>
</div>
</div>
{% endfor %}
CSS:
.plant_beet_form {
width: 100%;
margin: 0 auto;
font-size: 3rem;
}
.plant div {
width: 70%;
margin: 0 auto;
}
.plant input{
margin: 0 auto;
width: 100%;
font-size: 2.5rem;
}
.plant img {
width: 10rem;
height: 10rem;
margin-bottom: 1rem;
}
.plant {
width: 30%;
margin: 0 auto;
margin-bottom: 2rem;
}
I already tried using display:grid and grid-template-rows: 1fr 1fr, but this didn't work either. Any idea?
Thank you
I think you could try this:
Html:
<div class="container">
<div class="plant">
<img src="{{plant.icon}}">
</div>
<div>
<label>{{plant.common_name}}</label>
<input type="number" name="percentage"/>
</div>
</div>
Css:
I added the following:
.container {
display:flex;
flex-direction:row;
}
Make sure you use grid-template-columns : 1fr 1fr in the Parent Div for example if the parent div of your content is .plant_beet_form then do this.
.plant_beet_form {
display: grid;
grid-template-columns: 1fr 1fr;
}
And style your .plant class as you need after that
Related
I want the grid columns to be equal in width whether it will be one, two, or more columns, Also
the column gap must be the same. I found one of the examples but when using text-right for columns the column width seems not equal. Anyone helps me to achieve this?
In the following example, column gap spacing and width are not equal. I want to achieve using CSS or JS.
.grid-equal-columns {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.grid-equal-columns > * {
overflow: hidden;
text-align: right;
margin: 10px;
}
<div class="grid-equal-columns">
<div>Sample</div>
<div>12122</div><div>hello text</div>
<div>44444</div>
<div>5555</div><div>6666666666666666666666666</div>
</div>
</div>
grid-auto-columns: 1fr;
creates 1fr columns equally distributed to the grid. regardless how long your text will be in the the cell.
You can achieve two ways.
remove grid-auto-columns: 1fr;
.grid-equal-columns {
display: grid;
grid-auto-flow: column;
}
.grid-equal-columns > * {
overflow: hidden;
text-align: right;
margin: 10px;
}
<div class="grid-equal-columns">
<div>Sample</div>
<div>12122</div>
<div>hello text</div>
<div>44444</div>
<div>5555</div>
<div> 6666666666666666666666666</div>
</div>
or use flexbox with justify-content: space-evenly
.grid-equal-columns {
display: flex;
justify-content: space-evenly;
}
.grid-equal-columns > * {
overflow: hidden;
text-align: right;
margin: 10px;
}
<div class="grid-equal-columns">
<div>Sample</div>
<div>12122</div>
<div>hello text</div>
<div>44444</div>
<div>5555</div>
<div>6666666666666666666666666</div>
</div>
You need to provide fix width to your grid-column so, it's take fix width and your every column should be same.
<!DOCTYPE html>
<html>
<style>
.grid-equal-columns {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.grid-equal-columns > * {
width: 50px;
overflow: hidden;
text-align: right;
margin: 10px;
}
</style>
<body>
<div class="grid-equal-columns">
<div>Sample</div>
<div>12122</div>
<div>hello text</div>
<div>44444</div>
<div>5555</div>
<div>6666666666666666666666666</div</div>
</body>
</html>
const Sheet = [
{
"Code": "A-0-1",
"UPC": "4009803054728",
"Title": "U.S.S",
"Price": "$34",
"InStock": "7"
}
]
const productsEl = document.querySelector(".Sheet");
function getProducts() {
Sheet.forEach((product) => {
productsEl.innerHTML += `<div class="productContainer">
<div class="img">
<img src=${product.imgSrc} alt="" height="170px;" width="170px">
</div>
<div class="itemdesc">
<h2 class="itemName">${product.Title}</h2>
<h4 class="price"><span>${product.Price}</span></h4>
<div class="desc">
<p>${product.Code}</p>
</div>
<div class="stock">
<p> Available ${product.InStock} </p>
</div>
</div>`;
})
}
getProducts()
.Sheet {
margin-top: 100px;
margin-left: 50px;
display: grid;
grid-template-columns: repeat(5, 250px);
grid-template-rows: minmax(200px, max-content) repeat(auto-fill, 190px);
row-gap: 80px;
}
.productContainer {
display: block;
margin: 0 auto;
border: 1px solid lightgrey;
width: 200px;
max-height: 230px;
border-radius: 5px;
padding: 5px;
height: fit-content;
}
<div class="Sheet">
</div>
I have thousands of those Objects with different amount of wording. Obviously longer titles take more space therefore the text comes out of the container or the container gets bigger. How do I keep the container the same size and not have overflow? I need to wrap in the container and keeps its size so the page looks consistent.
if you really wanna keep the container the same size, then you maybe should use overflow: hidden; or overflow: scroll on your cantainer. but you can also play with your image size to give the content more space.
I am new to JQuery and am trying to create a product slider for my website. I was having some troubles so I made a basic version of it in this question. For some reason I am having no luck in getting it to work and have no idea why.
The three product boxes will animate as a section rather than individually, similar to this one https://smartslider3.com/product-carousel/. The animation will go from right to left when clicking the previous button and left to right when clicking the next button but I have just left it as slide up and slide down at the moment because I don't know the correct code for the animation. Touch swipe support would also be nice to have.
$( document ).ready(function() {
$("#slider-next-button").click(function(){
var currentSlider = $(".active");
var nextSlide = currentSlider.next();
currentSlider.slideDown(2000);
currentSlider.removeClass(active);
nextSlide.slideUp(2000);
nextSlide.slideUp(2000);
})
});
;
.content{
width: 80%;
margin: auto;
}
.slider-section{
background-color: lightgrey;
height: 600px;
padding: 50px 0px 0px 0px;
}
.slider-container{
display: grid;
grid-template-columns: 1fr 12fr 1fr;
grid-column-gap: 20px;
}
.slider-previous-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-next-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-items{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.slider-items.active{
display: grid;
}
.slider-item{
background-color: blue;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="css/slidertest.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div class="slider-section">
<div class="content">
<div class="slider-container">
<div class="slider-previous-button"><p></p></div>
<div class="slider-items active">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="slider-next-button"><p></p></div>
<div class="slider-items">
<div class="slider-item">4</div>
<div class="slider-item">5</div>
<div class="slider-item">6</div>
</div>
<div class="slider-items">
<div class="slider-item">7</div>
<div class="slider-item">8</div>
<div class="slider-item">9</div>
</div>
</div>
</div>
</div>
</body>
</html>
I just want the large image to display on the left hand side, and the smaller images (grid layout - repeat(2, 1fr) in this fraction) to align on the RIGHT.
But its showing like this.
https://i.stack.imgur.com/S76jN.png
Totally there are seven small images and one big image. I am just trying to code an image gallery using HTML CSS JS.
.container {
width: 100%;
}
.main-img img{
display: inline-block;
width: 70%;
}
.images img {
float: right;
width: 30%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>
Kindly help me to solve this problem.
The problem is you are not setting width correctly. You should set width on the wrappers. Also don't forget to use Float:left in order to have images oneline. I have removed float:right and display:inline-block from img elements as these are not necessary, Consider the following example :
.container {
width: 100%;
}
.main-img{
width:70%;
float:left;
}
.main-img img{
width:100%
}
.images img {
width: 100%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>
I'm working with handlebars.js and trying to create a responsive grid structure - however I can't seam to figure out how to create the structure with the handlebars!
I cant work out how to organise the divs and script so the results show in the separate 'panels'! Currently they just show in one long Column on top of each other.
I can get it to work with normal divs but not when I add the handlebars and script in.
I think there is a simple change - but I cant work out what it is!
How do I get the JSON data retired to show in each separate panel?
Thanks in advance - I've spent hours trying to figure this out!
This is the closest I have got:
CSS:
.wrapper {
margin: 0 auto;
width: 100%
}
.wrapper > * {
background-color: #fafafa;
}
.content {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 16px;
}
.panel {
margin-left: 5px;
margin-right: 5px;
height: 50px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
.content {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
HTML
<div id="expand-box">
<div class="wrapper">
<article class="content">
<div class="panel">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</article>
</div>
JS AJAX
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$('.panel').html(html);
Figured it out after many more hours... Surprised there isn't more detail on this on SO. Maybe it will save someone else a few hours!
CSS
.wrapper {
margin: 0 auto;
width: 100%
}
#handlebars-sandbox {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 20px;
margin-top: 20px
}
.panel {
margin-left: 5px;
margin-right: 5px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
#handlebars-sandbox {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
JQUERY
var source = $('.entry-template').html();
var template = Handlebars.compile(source);
var html = template(data);
$('#handlebars-sandbox').html(html);
HTML
<div id="expand-box">
<div class="wrapper">
<div id="handlebars-sandbox"></div>
<div class="content">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="panel">
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>