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;
}
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
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.
I have a grid below with css.
In second row, The Document Date is Too close to Document Number. I tried changing 1fr to 3fr, didn't work.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
I was going to add the following with margin-left. Just curious if there isa more professional with css grid, to separate the column spacing.
.second-column {
margin-left:5px;
}
You can use:
grid-gap
grid-row-gap
grid-column-gap
to add spacing to the grid
For example
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Note that grid-row-gap and grid-column-gap are being phased out for row-gap and column-gap respectively.
Just add column-gap: 2rem; in rem or px as you want.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem; /* added */
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
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 would like to use CSS Grid to create a set of unevenly sized content columns which, for smaller viewports, stack vertically instead of horizontally.
My starting point is this codepen, which has three repeated columns of equal size that stack when you change the size of the viewport (by making the browser window smaller, for example). That pen starts out looking like this:
When I halve the available screen space, it shrinks down to like this:
This automatic breaking behavior is achieved with the follow grid definition in CSS:
.wrapper-wrapper {
display: grid;
grid-template-columns: 1fr minmax(0, 1024px) 1fr;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
grid-column: 2/-2;
}
I modified this code to use unevenly sized columns in this codepen:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
grid-gap: 10px;
}
But when I resize the browser window, instead of stacking in the rows like the first example, this example does the following:
But I want the following to happen:
The only difference between the first example and the second is that in the second, an unevenly sized grid column layout is used. If I modify the following line:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
And replace it with:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));
As in the first example, it begins to do what I want again.
What do I need to do to preserve this behavior in the uneven columns case?
The problem code:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 3fr)
minmax(200px, 4fr)
minmax(200px, 3fr));
grid-gap: 10px;
}
.content-section {
background: lightblue;
}
.item-image {
width: 100%;
}
<div class="layout">
<div class="content">
<div class="content-section sidebar left-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section content-main">
<div class="center-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section sidebar right-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
</div>
</div>