Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.
What happens:
div1
div2
div3
What I want to happen:
div1 div2 div3
<div class="jar-lists-wrapper slide-in">
#foreach($folders as $folder)
<div class="jar-lists hidden" data-name="{{$folder}}">
<div class="jar-list box" data-name="{{$folder}}">
<div class="box-header with-border">
<h1 class="box-title">{{$folder}}</h1>
</div>
<div class="box-body">
<div class="jar-children">
#foreach($jars as $jar)
#if(strpos($jar, strtolower($folder)) !== false)
<div>
<h3 class="jar-title">Version:
{{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
</h3>
<form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
#if(str_replace('.jar', '', $jar) == $currentJar)
<br><button class="btn btn-success" type="submit">Installed</button>
#else
<br><button class="btn btn-primary" type="submit">Install</button>
#endif
</form>
<br>
</div>
#endif
#endforeach
</div>
</div>
<div class="box-footer">
View More<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
#endforeach
</div>
And this is my css:
.main {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 2em
}
.jar-lists-wrapper {
position: relative;
display: block
}
.jar-lists {
position: relative;
margin-bottom: 60px;
margin-top: 30px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 32.5%);
justify-content: space-between;
z-index: 1
}
.jar-lists.hidden {
display: none
}
.jar-list {
text-align: center;
}
.jar-title {
font-size: 16px;
color: #5e5e5e
}
.jars-more {
display: block;
width: 100%;
text-decoration: none;
text-align: center
}
.jars-more {
padding: 10px 0;
font-size: 18px;
color: gray;
cursor: pointer
}
.jars-more i {
margin-left: 10px
}
#media screen and (max-width:1250px) {
.jar-lists {
grid-template-columns: repeat(2, 47%)
}
.jar-list {
margin-bottom: 30px
}
}
#media screen and (max-width:900px) {
.jar-lists {
grid-template-columns: repeat(1, 100%)
}
}
div are block level element so they appears horizontally. So use display:inline-block and width
.child {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use flex
.parent {
display: flex;
flex-direction: row;
}
.child {
border: 2px solid green;
width: 150px;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.child {
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div
Try specifying gird-template-spacing from 32.5% to 1fr.
Related
I have 20 element for a grid view. But I want only 3✕3 grid view, where there will be only 9 element in the view window. And the rest of the element should be placed in the right side of the window as a scrollable asset.**
No matter what the screen size is I want to show only the first 9 element in the grid.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
In this case the grid should flow vertically. And you can set it up like this with some calculation:
.cards {
/* how many columns on the first screen */
--cols: 3;
/* how many rows on the first screen */
--rows: 3;
/* grid gap */
--gap: 5px;
--width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
display: grid;
position: relative;
grid-auto-flow: column dense;
grid-template-rows: repeat(var(--rows), 1fr);
grid-auto-columns: var(--width);
grid-gap: var(--gap);
overflow-x: auto;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
<div class="card">THIRTEEN</div>
<div class="card">FOURTEEN</div>
</div>
.cards {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.card {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
</div>
A simple way to achieve this is by using nth-child CSS selector on your card class. Since, you want to display only he first 9 cards in the container, you will have to hide the cards from 10th position onwards.
Consider :nth-child(an + b). Here, the term b is the offset that you can specify to target cards. If you remove a and substitute the value of b as 10, it will target all the cards that appear as 10th child and later. The selector will be like so: :nth-child(n + 10). This is a comparatively readable solution.
Bonus Tip: To make sure the cards show up as 3 x 3 grid, you can explicitly update grid-template-columns CSS property to be repeat(3, 1fr) instead of repeat(auto-fill, minmax(150px, 1fr))
This is the final snippet:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
display: none;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
I use this tool and it makes everything easier : https://cssgrid-generator.netlify.app/
You just select wich grid you want, how many rows... and it gives you the css + html :)
I was trying hard to open a modal on button click to display the calendar date and time also but nt getting anything. can any one share your knowledge.
i added the sample image how i want to display it.
Since you gave an image as an example I thought you wanted to create that exact look.
The following should work inside your modal.
const dateInput = document.getElementById('input-date');
const displayDate = document.getElementById('currentDate');
// init view
(() => {
let date = new Date().toISOString().slice(0, 10);
dateInput.value = date;
displayDate.innerText = date;
})();
.wrapper {
padding: 1rem;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
#time-picker {
padding: 1rem;
border: 1px solid #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: center
}
#header-row {
display: grid;
grid-template-columns: 2fr 1fr;
}
#data-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.bordered {
border: 1px solid #000;
margin: 1rem;
}
#time-picker .bordered > div {
margin: 0.5rem;
}
#time-picker > a {
width: 100%;
}
#currentDate {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#button-row {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
}
<div id="outer">
<div class="wrapper">
<label for="input-date">Need Date</label>
<input type="date" id="input-date">
</div>
<div id="time-picker">
<div id="header-row">
<div>Hours of Day</div>
<div>Minutes</div>
</div>
<div id="data-row">
<div class="bordered">
<div>00</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
</div>
<div class="bordered">
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
</div>
<div class="bordered">
<div>00</div>
<div>05</div>
<div>10</div>
<div>15</div>
<div>20</div>
<div>25</div>
<div>30</div>
<div>35</div>
<div>40</div>
<div>45</div>
<div>50</div>
<div>55</div>
</div>
</div>
Clear Time
</div>
<h2 id="currentDate" class="row"></h2>
<div id="button-row">
<button>Cancel / Exit</button>
<button>Save / Exit</button>
</div>
</div>
I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.
I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS
This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>
I'm trying to create a menu which I'm laying out using CSS grid. The problem that I'm having is figuring out how I can make the menu interactive when the mouse is hovering over each menu item.
I would like to be able to highlight the entire row when the mouse is over any of the menu items in the row. I can highlight each individual grid cell by adding a :hover css rule, but I don't know how to highlight the entire grid row.
The second part is then detecting when a row is being clicked. Again, I can add an onClick event handler to each cell but that doesn't seem ideal, as users could accidentally click in the gap between grid cells. I was thinking that if I can figure out how to highlight the entire row, then i could add the click handler to this row highlighter and that would solve the gap click problem.
I have created a codepen example that demonstrates how the menu is currently constructed: https://codepen.io/marekKnows_com/pen/RqMgGw
HTML:
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
<div class="separator"></div>
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
CSS:
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
One option is to wrap the row elements with a div, include style display: contents; in the wrapper div, add the click handler to the wrapper div.
CSS grid will treat the elements inside the wrapper as if there was no wrapper when laying out the contents, so they will be aligned as you desire. See MDN display-box for more info. That link also points out browsers have accessibility bugs with display: contents;.
I have tested only with Firefox so far.
<div class="myGrid">
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.row {
display: contents;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
I finally got it to work. What I ended up doing was making the anchor element have position relative. Then I added a new div with position absolute under the anchor element. From within JavaScript I can size the new element to be the full width of the grid and using z-index I can position it relative to the other elements in the row accordingly.
Firstly, you might want to change your html so the .anchor elements are wrapping each item.
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="anchor" id="item3">
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="anchor" id="item4">
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
And then use flex to align the contents of each item
.myGrid {
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.anchor {
display: flex;
justify-content: flex-start;
}
/* Hover for each anchor */
.anchor:hover {
background: red;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
margin-left: auto; /* push the shortcut to the right */
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
https://codepen.io/anon/pen/xQWLaE
.anchor:hover >
.mygrid
{ background:red }
check this if it works on hovering item1 it will change the border color(from black to red as highlighting)