i am trying to do the below steps to have my grids as i want:
How to set auto-margin boxes in flexible-width design using CSS?
The solution that they offer here is nice, and its works if i put this code outside angular, but the problem is when i insert this inside angular component, for example app-root
if i put the below code, outside the component(inside the index.html) works, but in another componet not.
i thinks that some functionality of angualr is breaking my basic css code, because if outside of app-root components works and inside of it doesnt, but i dont have any style, is strange.
I would suggest to use flex for layout instead. No tricks needed, flex support it all. Try this:
.container {
border: 2px dashed #444;
min-width: 800px;
max-width: 1400px;
/*No tricks needed, flex support it all*/
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container > div {
margin-top: 16px;
border: 1px dashed #f0f;
width: 200px;
height: 200px;
display: inline-block;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
I have a flex-container with the 'flex-direction' set to column and 'justify-content' set to 'center'.
By default child items will be vertically aligned to the center of the flex-container.
However, I want the first item to be flush against the top of the column.
So for the child I've added the property 'justify-self: flex-start'.
This has no effect. The 'justify-self' property is being ignored.
[Codepen](https://codepen.io/bobdobbs_/pen/XWBNZwx)
Even when I set 'justify-self' to !important the property gets ignored.
The easiest thing to do here seems to be to use absolute positioning. But if that's the case there doesn't seem to be much of a point to using flexbox for anything much at all.
Is there a flexbox solution for this problem?
Or should I just stick to using absolute positioning?
I would separate the header content from the other content (for readability and semantic structuring of the column) and use flex to create two containing divs inside the parent (one for the header and one for the content) - and apply the vertical centering to the content area.
I have added outlines to show the different divs and aligned the text to the center of the column too.
.wrapper {
display:flex;
flex-direction: column;
outline: solid 1px red;
outline-offset: -1px;
width: 300px;
height: 100vh;
}
h2, p {margin: 0}
.header {
padding: 8px;
text-align: center;
flex-shrink:0;
outline: solid 1px blue;
outline-offset: -4px;
}
.content {
padding: 8px;
text-align: center;
flex-grow:1;
outline: solid 1px green;
outline-offset: -4px;
display:flex;
flex-direction: column;
justify-content: center;
}
<div class="wrapper">
<div class="header">
<h2>heading</h2>
</div>
<div class="content">
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
Please press "Run code snippet" and see the code. Stop useing position absolute for normal positioning things.
Use 1-2 hour here -> https://flexboxfroggy.com/ and you will be good at flexbox.
.flex {
display: flex;
}
.jcc {
justify-content: center;
align-items: center;
}
.column {
flex-direction: column;
}
<div class="flex jcc column">
<h2>I want this header to be at the top</h2>
<h3>let this be centered</h3>
</div>
I have a web page with topics, and I want to have four topics in each row. I've put 4 dummy topics, but they align in a column to the left, instead of in a row, like so:
This is the CSS code I used:
.Topic{
text-align: center;
width: 20%;
background-color: #F2EECB;
margin: 2%;
}
.Topics{
background-color: red;
display: grid;
gridTemplateColumns: auto auto;
}
And this is the JSX code I used to render the topics:
function Topics(){
var TopicsList = TopicsDB.map(topic =>
<div className="Topic" style={divStyles}>
<h2> {topic.Name} </h2>
</div>
)
return <div className="Topics">
{TopicsList}
</div>
}
Where Topics is the red parent div, and Topic are the individual topics.
Tried using different variations of grid display and columns arrangement, to no avail.
div {
outline: 2px dashed blue;
display: inline-block;
height: 48px;
width: 56px;
}
<div></div>
<div></div>
<div></div>
<div></div>
If your divs or topics are shown in one row instead of multiple rows, you could use display:flex on the parent div, then you set flex-direction: column and this will show each one of them in a column like the screenshot you attached
Just change your css to this:
.Topics {
background-color: red;
display: flex;
justify-content: space-around;
}
.Topic {
text-align: center;
width: 20%;
background-color: #f2eecb;
margin: 2%;
}
I think it can help you!
Use
display: inline-block;
For Topics
I'm trying to use the white-space: nowrap in CSS to allow scrolling on overflow.
However, this prevents the innerHTML inside the divs to wrap.
If I remove the white-space: nowrap, the innerHTML works as it should but the divs don't scroll, instead they go onto new line.
With no-wrap:
Without no-wrap:
Leave the
white-space: nowrap;
in the outer div and in each inner div:
white-space: normal;
for example:
.outer-div{
white-space: nowrap;
}
.outer-div>div{
white-space: normal;
}
Here's a working example of a few div elements, with a horizontal scroll when they overflow their parent node, which is a section in this demo.
In the below demo, I thought it best to use flexbox, which gives some nice benefits.
section{
display: flex;
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
border: 1px solid green;
height: 150px;
}
div{
flex: 400px;
min-width: 200px;
margin: 5px;
padding: 5px;
background: silver;
}
<section>
<div>some very very long text which should probably break because it is very long.</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
I am currently using CSS grid, and I'm using the grid-row-gap and column-row-gap many places. My problem is that when doing media queries, and some elements/divs are not to be shown at smaller resolution I usually just set them to display: none. However, if I'm not mistaken, even though the element can be seen, the row or column gap feature still applies on the "hidden" element.
Is there any way to fix this, or am I doing something wrong here?
EDIT:
Okay, it seems like display: none don't affect the grid-row-gap - which makes sense. But I found a small workaround by removing the grid-gap and adding a padding instead when the resolution changes. And that seems to do the trick.
Thanks for all the answers.
Is there any way to fix this [...]?
One simple fix when applying display: none; to child elements in a CSS grid, is to remember to alter the parent grid accordingly to take account of the fact that those child elements are no longer displayed.
Working Example:
body > div {
display: inline-grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
grid-row-gap: 6px;
grid-column-gap: 12px;
width: 120px;
height: 120px;
margin-right: 24px;
border: 1px solid rgb(255, 0, 0);
}
div div {
border: 1px solid rgb(255, 0, 0);
}
body > div:hover div:nth-of-type(n+7) {
display: none;
}
body > div:nth-of-type(2):hover {
grid-template-rows: auto auto;
height: 80px;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
In both the CSS Grids above the final three child elements are removed from display on :hover. But in the second grid (only) the height of the parent and the number of grid-template-rows are also reduced, thus avoiding displaying a gap which the non-displayed child elements used to occupy.
You can do this if you use grid-auto-columns (or grid-auto-rows) because the column definitions are dynamic, therefore no column exists if the item is hidden.
In this example I'm using grid-auto-flow: column which is sort of similar to flex-direction: row in this example. It's easier to visualize what's going on if they are columns vs. rows.
Note: grid-auto-flow is supported in IE, but *-auto-columns is.
Important: Don't confuse this with grid-template-columns: auto !
.outer-container
{
background: yellow;
outline: 1px solid black;
}
.container
{
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 10px;
}
.item
{
background: steelblue;
padding: .5em 1em;
color: white;
}
.item.hidden
{
display: none;
}
<div class="outer-container">
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden">Item 3 (hidden)</div>
</div>
</div>
I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?
Flex Solution
It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.
Old Solution (Valid if you are not willing to use flex)
If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
(Or JSFiddle)
You now can do this with Flexbox justify-content: flex-end now:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consult your Caniuse to see if Flexbox is right for you.