I am new on css. I am trying to built a calculator. What I am trying to do is that
when I click a button on the calculator, a menu (sin, cos, tan, cot) must show up. I have no idea if it is possible. I searched it but I am having hard time to find it. Can you help ? I explained below in detail.
Here is some of html...
<div class="calculator">
<div class="screen">536,125</div>
<div class="above-numbers">
<div>√</div>
<div>Π</div>
<div>^</div>
<div>!</div>
<div class="show-more">V</div> // When I hover over this div, page must render the div below but
it should not render it if I am not hovering over it
<div class="tr-menu">
<div>sin</div>
<div>cos</div>
<div>tan</div>
<div>cot</div>
<div>cosec</div>
<div>sec</div>
</div>
</div>
I am triyng to control class="tr-menu" div from class="show-more" div.
Here is some of my css
.above-numbers{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
cursor: pointer;
justify-content: space-between;
}
.above-numbers div{
border: none;
color: white;
background-color: #282a2d;
cursor: pointer;
}
.show-more{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.show-more:hover{
height: 100px;
}
when I hover over 'V' a menu must show up and that menu must contain sin cos tan ....
I managed to get hover working by changing css for this :
.tr-menu{
display:none;
}
.show-more:hover + div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100px;
}
It should get you started. See here for example : https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/
Oh, and maybe you should update your title for something more specific since you were looking for a CSS hover.
Related
I have a CSS grid with several columns and many rows (I'm building a timetable view). The rows and columns are defined on the grid element itself, and then on the elements within the grid I set their column (always only one column) and their rows (might be more than one row).
An example is as follows:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
Now, what I would like to have is that the elements resize themselves and flow nicely, such that they fit next to each other. I can mock this using width and margin on the elements:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
width: 50%; /* ADDED */
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
width: 50%; /* ADDED */
margin-left: 50%; /* ADDED */
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
However this is not optimal, especially as the elements are inserted dynamically. Is there a way to have the elements size & align themselves automatically using CSS? I've tried to use display: flex on the entries, but that did not result in what I want (or maybe I forgot to add another rule).
Thank you for any ideas, and have a nice day!
I made this to see if that is what you are looking for
.grid{
display: flex;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
I just changed your display to flex and delete your margin-left: 50%; on the entry two, hope it is what you are looking for
The title. I've managed to align 2 divs side by side using grid, thats fine, but as soon as the content of the second div is a select element, the second div is for some reason shorter, how can I fix that?
CSS
.inputwrap{
display: grid;
grid-template-areas: 'halfl halfr';
grid-column-gap: 2%;
}
.input50r{
grid-area: halfr;
display: grid;
}
.input50l{
grid-area: halfl;
display: grid;
}
HTML
<div class='input50l'>
<input type='password' name='encKey' placeholder='Password' />
</div>
<div class='input50r'>
<select>
<option>Option</option>
<option>Option</option>
</select>
</div>
problem example
The select element has no special styling, just cosmetic
.inputwrap{
display: grid;
grid-template-areas: 'halfl halfr';
grid-column-gap: 2%;
grid-template-columns: 1fr 1fr;
}
The markup below works as expected on firefox (paragraph is 980px), but not on chrome (paragraph is 979.94px). Does anyone know how to prevent this from happening?
codepen example: https://codepen.io/isaacsgraphic/pen/jOVrrMO
body {
width: 980px;
background: #99c;
margin: 0 auto;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
background: white;
}
.content-wrap {
grid-column: span 12;
width: 100%
}
<div class="row">
<div class="content-wrap">
<p>Example paragraph which is 979.94px, not 980 like the row it's within</p>
</div>
</div>
here's a longer example which shows how this problem breaks my column layout on chrome: https://codepen.io/isaacsgraphic/pen/yLVJGqp
It seems that this is a rounding error in chrome. It is possible to recreate the problem with any layout which creates a recurring number sub-pixel fraction for column widths (like 3 or 12 column layouts with 980px), whereas numbers of columns which divide the width easily like 5 or 10 work without issues. The same issues can be caused by grid-column-gap numbers which don't divide nicely.
The simplest fix is to make sure the layout pixel width divides neatly into 12 (6 and 3 work too actually, since chrome can handle one or two decimal places)
body {
width: 984px;
background: #99c;
margin: 0 auto;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 18px;
background: white;
}
.content-wrap {
grid-column: span 12;
width: 100%
}
<div class="row">
<div class="content-wrap">
<p>Example paragraph which is fits the full width of the row it's within</p>
</div>
</div>
Maybe it is because of the different fonts different browsers use?
I'm trying to use CSS Grid in IE11. From what I've heard, it is posible. What I am trying to do is something like this:
Example on CodePen
My HTML is simple:
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
The CSS is
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.col {
margin: 0;
padding: 0;
height: 100px;
background: #ddd;
}
When I load the page in chrome, it's fine (see image above). Alas, here's how it looks in IE11.
Even though I've added in the relevant MS prefixes, it still seems like the boxes are stacked on top of each other.
Anyone know what I'm missing here?
I've been playing around with CSS Grid recently and have noticed something that I can't see to find the answer to. Let's say I split my page out to have 2 columns, and then a row below it, with another column (which spans both columns). On mobile, I'd like them to stack one on top of the other and then go back to layout described above after a certain breakpoint. Here is the markup:
HTML
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
SCSS
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color:grey;
grid-gap:10px;
#media only screen and (max-width:800px) {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.lower {
grid-template-columns: 1fr;
grid-template-rows:auto;
background-color: green;
grid-gap:10px;
}
I've noticed that on mobile, even though I've defined grid-gap for both of my grid sections, on mobile when the columns stack, the grid-gap is not maintained. So in the fiddle below, when you make the window smaller, you can see that when the columns, stack one on top of the other, the gap between B and C is non existent. Here is the fiddle:
Fiddle
Hope I'm making sense!
EDIT: Bear in mind I'm only testing this in Firefox and Chrome (which support grid).
The grid-gap rule doesn't work between B and C because it doesn't apply.
This rule creates gutters between rows and columns inside a grid container.
But you are declaring grid-gap on .upper and .lower, two siblings in a block container. Their parent (.grid) is not a grid container because it doesn't have display: grid or inline-grid.
Therefore, grid-gap: 10px on .upper is creating a 10px gutter between A and B...
and grid-gap: 10px on .lower is creating a 10px gutter between.... nothing (.lower has only one grid item. grid-gap creates gutters between multiple grid items).
fiddle demo 1
For grid-gap to work among the .upper and .lower siblings you need to apply it to their parent, which must be a grid container.
fiddle demo 2
.grid {
display: grid; /* NEW */
grid-gap: 25px; /* NEW */
}
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.lower {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px; /* does nothing unless there are multiple grid items */
}
#media ( max-width:800px ) {
.upper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.upper > * { border: 1px dashed red; }
.lower > * { border: 1px dashed blue; }
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>