i found jQuery code that prints out the div that is clicked inside a grid, how can i modify this code so that it adds class ".active" only to the div .grid_item that has been clicked, can somebody help me understand how to do this?
I have added the html and js down below.
$(".grid").click(function(event) {
var hoveredGridItems = $(this).children()
.filter(function() { return $(this).is(":hover"); });
if (hoveredGridItems.length > 0)
console.log(hoveredGridItems[0]);
else
console.log("no element detected!");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
$(".grid__item").click(function(event) {
$(".grid__item").removeClass("active");
$(event.currentTarget).addClass("active");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
.grid__item.active {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
Easiest way is to set an event handler on the individual "grid__item", not on the whole grid (rather than using the hover method which is a bit overly complex).
Then you can use the currentTarget of the event to get the item clicked to add the class. I also, before that, remove that active class from all the grid items so only the most recently clicked gets the class.
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 would like to have A B and C aligned in the middle.
How can I get D to go completely to the right?
BEFORE:
AFTER:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
https://jsfiddle.net/z44p7bsx/
Below are five options for achieving this layout:
CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout
Method #1: CSS Positioning Properties
Apply position: relative to the flex container.
Apply position: absolute to item D.
Now this item is absolutely positioned within the flex container.
More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.
Use the CSS offset properties top and right to move this element into position.
li:last-child {
position: absolute;
top: 0;
right: 0;
background: #ddd;
}
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p {
text-align: center;
margin-top: 0;
}
span {
background-color: aqua;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
One caveat to this method is that some browsers may not completely remove an absolutely-positioned flex item from the normal flow. This changes the alignment in a non-standard, unexpected way. More details: Absolutely positioned flex item is not removed from the normal flow in IE11
Method #2: Flex Auto Margins & Invisible Flex Item (DOM element)
With a combination of auto margins and a new, invisible flex item the layout can be achieved.
The new flex item is identical to item D and is placed at the opposite end (the left edge).
More specifically, because flex alignment is based on the distribution of free space, the new item is a necessary counterbalance to keep the three middle boxes horizontally centered. The new item must be the same width as the existing D item, or the middle boxes won't be precisely centered.
The new item is removed from view with visibility: hidden.
In short:
Create a duplicate of the D element.
Place it at the beginning of the list.
Use flex auto margins to keep A, B and C centered, with both D elements creating equal balance from both ends.
Apply visibility: hidden to the duplicate D
li:first-child {
margin-right: auto;
visibility: hidden;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }
<ul>
<li>D</li><!-- new; invisible spacer item -->
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element)
This method is similar to #2, except it's cleaner semantically and the width of D must be known.
Create a pseudo-element with the same width as D.
Place it at the start of the container with ::before.
Use flex auto margins to keep A, B and C perfectly centered, with the pseudo and D elements creating equal balance from both ends.
ul::before {
content:"D";
margin: 1px auto 1px 1px;
visibility: hidden;
padding: 5px;
background: #ddd;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Method #4: Add flex: 1 to left and right items
Starting with Method #2 or #3 above, instead of worrying about equal width for the left and right items to maintain equal balance, just give each one flex: 1. This will force them both to consume available space, thus centering the middle item.
You can then add display: flex to individual items in order to align their content.
NOTE about using this method with min-height: Currently in Chrome, Firefox, Edge and possibly other browsers, the shorthand rule flex: 1 breaks down to this:
flex-grow: 1
flex-shrink: 1
flex-basis: 0%
That percentage unit (%) on flex-basis causes this method to break when min-height is used on the container. This is because, as a general rule, percentage heights on the children require an explicit height property setting on the parent.
This is an old CSS rule dating back to 1998 (CSS Level 2) which is still in effect in many browsers to some degree or another. For complete details see here and here.
Here's an illustration of the problem posted in the comments by user2651804:
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container>div {
background: orange;
margin: 5px;
}
#flex-container>div:first-child {
flex: 1;
}
#flex-container::after {
content: "";
flex: 1;
}
<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>
The solution is to not use the percentage unit. Try px or just nothing at all (which is what the spec actually recommends, despite the fact that at least some of the major browsers have appended a percentage unit for whatever reason).
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container > div {
background: orange;
margin: 5px;
}
/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */
#flex-container > div:first-child {
flex: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex: 1;
flex-basis: 0;
}
/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY
#flex-container > div:first-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
*/
<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>
Method #5: CSS Grid Layout
This may be the cleanest and most efficient method. There is no need for absolute positioning, fake elements or other hackery.
Simply create a grid with multiple columns. Then position your items in the middle and end columns. Basically, just leave the first column empty.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>
The simplest solution will be to justify-content center to the parent container and giving margin-left auto to first and last child element.
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}
<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>
Most easy way
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
}
<div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>
Using the display:grid approach, you can simply put all of the ul children into the same cell and then set justify-self:
.ul {
display: grid;
}
.ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
.ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
.li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}
<div class='ul'>
<span>
<span class='li'>A</span>
<span class='li'>B</span>
<span class='li'>C</span>
</span>
<span class='li'>D</span>
</div>
Inspired by the Method #5: CSS Grid Layout of #Michal Benjamin's solution and because I'm using Tailwind and as of now still don't have access to all the grid options by default. This seems to work:
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li {
align-self: center;
}
li:nth-child(1) {
justify-content: flex-start; /* OR margin-right: auto */
}
li:nth-child(3) {
justify-content: flex-end; /* OR margin-left:auto */
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
PS: Not sure if mixing up flex and grid like this is a good idea!
If you want to make it aligned, you can simply attach an empty span and split the three child spans into them.
The easiest way:
.wrap {
display:flex;
}
.full-width {
width: 100%;
}
.centered {
display: flex;
justify-content:center;
}
.btn {
display: flex;
justify-content: end;
}
<div class="wrap">
<div class="full-width"></div>
<div class="full-width centered">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="full-width btn">D</div>
</div>
Very clear question. I couldn't help but post the answer after a few hours of digging. We Could of solved this with tables, table-cell, absolute positions, transforms but we just had to do it with flexbox :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}
http://codepen.io/rgfx/pen/BLorgd
The accepted answer can be changed a bit because you can use grid template areas and do it without fake element
grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr
I expanded on Michael_B's answer
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}
2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Center</li>
<li>this</li>
</span>
<span>
<li>Accusamus</li>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Center</li>
<li>this</li>
</span>
<span>
<li>Accusamus</li>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Accusamus</li>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Center</li>
<li>this</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Center</li>
<li>this</li>
</span>
</ul>
Here with the help of SASS as a codepen
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
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'm trying to set the background of a div when it is clicked, and then when it is clicked again it reverses back to no color.
Here is my code:
<div class="wrapper">
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper div:hover {
background: white;
}
function set() {
var squares = document.getElementById('square');
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = "none";
}
if (squares[i].style.backgroundColor === "none") {
squares[i].style.backgroundColor = "white";
} else {
squares[i].style.backgroundColor = "none";
}
}
When I click the div it doesn't do anything. My javascript code isn't working, how should I change it so it makes the div background white when clicked and then none when clicked again.
You can put an event listener on the parent element that listens for the click event. When it gets a click event, if it is from one of the squares, toggle a class to keep the background color on it. If it already has that class, it will be removed.
document.querySelector('.squares').addEventListener('click', e => {
if (e.target.classList.contains('square')) {
e.target.classList.toggle('selected');
}
});
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .square:hover, .square.selected {
background: white;
}
body { background-color: #888; }
<div class="wrapper squares">
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
<div class="square">D</div>
<div class="square">E</div>
<div class="square">F</div>
<div class="square">G</div>
</div>
Your primary issue is this:
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
It's invalid to have the same id on more than one element. An id must be unique. So this line:
var squares = document.getElementById('square');
just selects the first div and then later, when you try to loop over all the cells, you don't because you never had all of the cells in the first place.
You just need to set one click handler on the parent of all the div cells. Then, in that handler, you can apply a CSS class to the div that triggered the event. This is called event delegation and works because events bubble up through the DOM.
// Get a reference to all the cells
let squares = document.querySelectorAll("div.wrapper > div");
// Set up you event handlers in JavaScipt, not with inline HTML
// event attributes like onclick
document.querySelector(".wrapper").addEventListener("click", function(event) {
// Remove all the background colors from all the cells
squares.forEach(function(square){
square.classList.remove("activeCell");
});
// Apply backgroun to clicked cell
event.target.classList.add("activeCell");
});
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper > div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper div:hover {
background: green;
}
.activeCell {
background-color:blue;
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I am developing a simple UI using CSS grid layout and HTML. I have many grid rows and columns
This is how I have coded the CSS and HTML as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WP Desktop</title>
<style>
html, body, .grid-container { height: 98%; margin: 2; }
.grid-container * {
border: 2px solid blue;
position: relative;
}
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1.8fr 0.2fr 1fr;
grid-template-areas: "プロジェクトビュー Design-Area Design-Area Design-Area Outline" "プロジェクトビュー Design Source Others Outline" "プロジェクトビュー Terminal Terminal Terminal Properties";
}
.プロジェクトビュー { grid-area: プロジェクトビュー; }
.Design-Area { grid-area: Design-Area; }
.Design { grid-area: ""; }
.Source { grid-area: ""; }
.Others { grid-area: ""; }
.Terminal { grid-area: Terminal; }
.Outline { grid-area: Outline; }
.Properties { grid-area: Properties; }
</style>
</head>
<body>
<div class="grid-container">
<div class="プロジェクトビュー"></div>
<div class="Design-Area"></div>
<div class="Design" ><button id="btndesign" > Design </button></div>
<div class="Source"><button id="btnsource"> Source </button></div>
<div class="Others"><button id="btnothers"> Others </button></div>
<div class="Terminal"></div>
<div class="Outline"></div>
<div class="Properties"></div>
</div>
</body>
</html>
I have not given any text in DIv class. But the grid are displays test Design-Area
How to hide this text.
PS: I am new to CSS and HTML
Note: Updated with complete code snippet
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Remove the content:attr(class); property from the above class. You're now adding a content to the grid area that prints your classname.
Your problem is this part of the css, in which you show the attibute as the box's content, which you apparently don't want:
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Removing this removes the text in your layout.
There is no display of test Design-Area unless you specifically put it there. So just remove the text.
.grid {
display: grid;
grid-template-areas: "Design-Area area-two";
grid-template-rows: 1fr 1fr;
}
.Design-Area {
border: 1px dotted grey;
grid-area: Design-Area;
}
.area-two {
border: 1px dotted grey;
grid-area: area-two;
}
<div class="grid">
<div class="Design-Area"></div>
<div class="area-two"> Here is text, Design-Area has no text </div>
</div>