Stackblitz Demo - https://stackblitz.com/edit/angular-ivy-lhtjgj?file=src/app/app.component.html
How do I add row-gap to provide spacing between each of these "boxed" elements within the *ngFor loop?
I do not want to use margin-top because that will add extra padding to the top of the first "boxed" element (same goes for margin-bottom with the last "boxed" element).
I tried to add a display: grid to the 'wrapper' div, but then overflow: hidden gets "ignored".
.box{
border: .1vw solid;
padding: 3vw;
}
.label{
white-space: nowrap;
overflow: hidden;
font-size: 5vw;
}
<div *ngFor="let x of documents">
<div class="box">
<div class="label">
Some ridiculously long text entered by the user
</div>
</div>
</div>
if you are using row-gap then add grid-template-rows too.
thats is,
grid-template-rows:auto auto;
row-gap:3vw;
display: grid;
Similarly,
if you are using column-gap then add grid-template-rows too.
thats is,
grid-template-columns:auto auto;
column-gap:3vw;
display: grid;
This will example to worked
.content[_ngcontent-oux-c40] {
padding: 3vw;
grid-template-rows: auto auto;
row-gap: 3vw;
display: grid;
}
result:
The whole screenshot
You need to apply the grid to your content container if you want a gap between the .iconandlabelcontainer .
Then it's just adding row-gap to your parent container.
requireddocumentsname {
font-family: var(--pcwidefontnormal2);
font-size: 5vw;
white-space: nowrap;
color: var(--pcblue);
}
.iconandlabelcontainer{
height: min-content;
border: .1vw solid blue;
font-size: 5vw;
white-space: nowrap;
overflow: hidden;
padding: 3vw;
}
.iconandlabel{
white-space: nowrap;
display: grid;
grid-template-rows: 1fr;
align-items: center;
width: 400px;
}
.content{
padding: 3vw;
display: grid;
row-gap: 30px;
justify-content:center;
margin: 0;
}
Grid is probably the best way to go, but FYI, you can solve the problem you describe with margins this way:
.box{
border: .1vw solid;
padding: 3vw;
margin-top: 3vw;
}
.box:first-child {
margin-top: 0;
}
Similarly, you can use the :last-child pseudocode to exclude the last box from a margin-bottom setting.
Related
So I am trying to get all boxes the same size. They are all embedded with one image each though (as well as some text). Maybe it's the image and its size/ shape that's causing this to happen? I'm not sure.
.box {
box-shadow: 0 0.75px 0.75px 0 #000;
box-sizing: border-box;
width: 100%;
max-height: 800px;
}
img {
width: 80%;
height: auto;
border: 2px solid #000;
}
.description {
font-family: "Red Hat Mono";
font-size: 12px;
font-weight: 300;
letter-spacing: 0.15px;
text-align: center;
color: #000;
margin: 5px 10px 20px 10px;
text-align: left;
}
main {
display: grid;
grid-template-columns: 350px 350px;
grid-template-rows: repeat(2, 300px);
gap: 40px;
grid-auto-rows: 300px;
grid-auto-columns: 400px;
grid-auto-flow: row dense;
margin-top: 40px;
margin-bottom: 40px;
justify-items: center;
justify-content: center;
align-items: stretch;
align-content: center;
}
I thought the 'box-sizing' would help, but it didn't. The only thing that helped me thus far was changing the margins of some of the different elements involved and I don't feel like that's the answer..
The box-sizing: border-box; property in CSS defines the sizing of an element to include any padding and border widths in the total width and height of the element. By default, in CSS, the width and height of an element only includes the content area, and padding and border are added to the outside of the defined width and height. You can take a look here.
To set all your boxes to a fixed size you need to use the width and height properties. You can also use other units of measure, which work in a relative way and not in an absolute way.
.box {
box-shadow: 0 0.75px 0.75px 0 #000;
width: 500px;
height: 500px;
}
I'm trying to use grid layout to create two columns. The right column has a fixed width but the left one should take whatever's left out. However, the problem is that when the content is too long, it extends the left column and causes a horizontal scrollbar in the container.
Now I can achieve this with other methods like calc but I'm trying to learn grid layout.
Here's a fiddle to demonstrate: https://jsfiddle.net/pta2c7um/
Ideally I would want the long title to get truncated respecting the grid structure.
Solution:
#ticket-viewer .list li{
/* grid-template-columns: auto 80px; */
grid-template-columns: minmax(0, 1fr) 80px;
padding: 1rem;
cursor: pointer;
}
Working example:
.list{
margin: 0;
padding: 0;
}
.list li {
padding: 0.8rem 0;
position: relative;
}
.list li small {
color: #777777;
}
.list li .content {
padding: 0 !important;
}
.list li .right-assist {
text-align: right;
}
.list.left-assist li, .list.right-assist li {
display: grid;
}
.list.right-assist li {
grid-template-columns: auto 40px;
}
.list.dividers li:before {
content: "";
position: absolute;
height: 1px;
background: #CCC;
bottom: 0px;
left: 0;
right: 0;
}
#ticket-viewer{
border: 1px solid #CCC;
display: flex;
}
#ticket-viewer .list{
width: 40%;
height: 560px;
overflow-y: auto;
border-right: 1px solid #CCC;
}
#ticket-viewer .list li{
/* grid-template-columns: auto 80px; */
grid-template-columns: minmax(0, 1fr) 80px;
padding: 1rem;
cursor: pointer;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="ticket-viewer">
<ul class="list right-assist dividers">
<li data-id="1" class="">
<div class="content"><span class="truncate">Test</span><small>Bug/Error on Website</small></div>
<div class="right-assist">Resolved</div>
</li>
<li data-id="2" class="active">
<div class="content"><span class="truncate">This is a very very long subject</span><small>Feature Request</small></div>
<div class="right-assist">Resolved</div>
</li>
</ul>
</div>
Explanation:
grid-template-columns: minmax(0, 1fr) 80px; step-by-step explanation:
Define two columns.
The last has fixed 80px width;
The first occupies remaining space.
minmax(0, ..) is used to tell browser to shrink width of column, if its content is wider than 1fr (i.e. 1 fraction of remaining space).
More info on MDN
I'm using the new CSS grid layout, basically I'm displaying a series of images, which is fine with six columns, I've gotten that part down, but the content has a variable number, and often times there is not enough content to fill every column, so in the event that there's only say two items in the row, I'd like them to center in the middle two columns. This being a relatively new API though I haven't seen anything like this that I've managed to get working properly. Here is some sample CSS, please excuse my general ignorance if something looks horribly wrong.
#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;
}
#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}
Flexbox is actually easier to use to achieve this output. Example below.
#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}
#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
</section>
List item
Center an image in the area
#result-images {
border: 2px solid #fffff;
border-radius: 5px;
background-color: #959595;
}
#result-images {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a a a ."
". a a a a .";
}
img {
grid-area: a;
align-self: center;
justify-self: center;
width: 100px;
height: 100px;
}
<div id="result-images">
<img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>
use auto-fit with repeat()
in your case grid-template-columns: repeat(auto-fit, 260px)
I'd like scrolling content underneath a variable-height element. Is this a CSS blind spot or am I just not thinking of an obvious solution?
Codepen with my best effort so far, but it only works in Chrome and Firefox:
http://codepen.io/anon/pen/BKpxGP
HTML:
<div class="sidebar">
<header>
<h1>Header content that I would like to remain on the screen even when the main area is scrolled down.</h1>
<p>I want to avoid specifying a height or top padding/margin value, as the content may grow or shrink at times.</p>
<p>This code seems to work in Chrome and Firefox but not in Safari. I haven't tested IE yet.</p>
<p><strong>Challenge:</strong> Can we make it cross-browser?</p>
</header>
<main>
<ul>
<li>Elephant</li>
<li>Giraffe</li>
<li>Otter</li>
<li>Nine-banded armadillo</li>
<li>Cat</li>
</ul>
</main>
</div>
CSS:
.sidebar {
width: 400px;
height: 700px;
border: 10px solid #808080;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
}
.sidebar header h1 {
font-size: 1.2rem;
}
.sidebar main {
overflow-y: auto;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.sidebar main li {
height: 400px;
border-right: 10px solid #ffc0cb;
margin: 10px;
padding: 10px;
}
it much more easy than you thought i think.
The css code that you are searching for is:
.example {
position: fixed;
}
On my website you see the same result in the header section. It stays on the top, even if you are scrolling down. :)
I think this is what you want http://codepen.io/dirtysmith/pen/jqyKBO
css
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
position: fixed;
width: 368px;
}
added a width to match the container, and position fixed.
I tried this today, and Safari works fine. I guess its Flex support was lagging but it's fixed now. Thank you for the suggestions everyone!
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 6 years ago.
When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
See http://codepen.io/tamlyn/pen/rarbeN?editors=110
How can I make the container contain all flex items in column mode?
I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK
The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:
This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}
I think this is the CSS you're looking for:
#container {
display: flex;
flex-flow: row wrap;
border: 1px solid #f00;
padding: 1px;
}
#container > * {
border: 1px solid #555;
background-color: #ccc;
height: 200px;
width: 200px;
margin: 1px;
}
The "Container" will always the the width of it's container, in this case the page, but now the boxes will adjust within it properly.
Let me know if I misunderstood your question.
Update
I've been playing with what you're asking for for several days now, and it really seems like it's not possible to do what you're asking... at least not in the direction that you're asking.
The container wants to be the maximum width possible. Unless you force the container to be the exact width, at which point it wont be the full width, but it wont flex with the flexing content either.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
border: 1px solid #f00;
}
.flex-item {
background-color: #ccc;
padding: 5px;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: 1px solid #555;
}
<div id="container" class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
The first try I do not understand what you mean
as reference material you can see this tutorial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/