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>
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>
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
Is there any way to get a behaviour similar to this shown on drawing?
I mean of course manually we can specify grid-row: span x, but grid-row: span auto seems doesn't work. I need all grid items to be the same size, but when one item has to resize (due to text overflow) i need to set the grid-row: span 2, and when it's getting bigger - respectively higher number.
To acheive something like this I need to write .js or can it be done with css only?
Here is code sandbox
let items = document.querySelectorAll('.item')
items.forEach(item => {
if(item.scrollHeight>item.clientHeight){
let itemSpan = Math.round(item.scrollHeight/40) + 1 // (height = 30) + (gap = 10) 40 =>
item.style.cssText = `--n : ${itemSpan}`
}
})
.container {
width: 200px;
margin: 15vw auto;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 30px;
grid-auto-flow: row;
grid-gap: 10px;
word-break: break-all;
}
.item {
background-color: gold;
min-height: 30px;
width: 50px;
padding: 5px;
grid-row: auto / span var(--n); /* var(--n) is calculated with js */
box-sizing: border-box;
}
<div class="container">
<div class="grid">
<div class="item">1</div>
<div class="item ">2 Lorem ipsum dolor sit amet consectetur adipisicing </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5 t amet consectetur adipisi</div>
<div class="item">6 lorem</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 t amet consectetur adipisi </div>
</div>
</div>
Sometimes good to review the fundamentals:
HTML is for structure.
CSS is for presentation.
JavaScript is for behavior.
Your problem falls within 3 ("item has to resize (due to text overflow)")
You can add min-height to ".item" class to set same size of grid items.
.item{
min-height:100px;
}
.App {
font-family: sans-serif;
text-align: center;
}
.container {
width: 200px;
height: 200px;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-flow: dense;
}
.item {
background-color: brown;
height: 30px;
min-height:100px;
}
.large {
height: fit-content;
word-break: break-all;
grid-row: span auto;
}
<div class="App">
<div class="container">
<div class="grid">
<div class="item"> </div>
<div class="item large">
asdasdasdasdasdsadasdasdasdasdasdasd{" "}
</div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
</div>
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>