I'm looking (for debugging purposes) for an example where text A appears before text B in HTML Code while B appears before A when being rendered in Browser.
An example that doesn't work:
<h1>A</h1>
<h1>B</h1>
Preferably 2 examples one using JS and one not using JS at all.
One try:
div.absolute {
position: absolute;
border: 3px solid #73AD21;
}
<div class="absolute">
This div element has position: absolute;
</div>
<p> test </p>
If you mean changing the orders you can try order property:
.flex {
display: flex;
flex-direction: column;
}
h1#foo {
order: 2;
}
h1#bar {
order: 1;
}
<div class="flex">
<h1 id="foo">A</h1>
<h1 id="bar">B</h1>
</div>
Using CSS flex with direction column-reverse
.container {
display: flex;
flex-direction: column-reverse;
}
<div class="container">
<h1>A</h1>
<h1>B</h1>
</div>
Or javascript, using insertBefore() to place B before A.
document.getElementById("A").parentNode.
insertBefore(
document.getElementById("B"),
document.getElementById("A")
);
<h1 id="A">A</h1>
<h1 id="B">B</h1>
Related
I want to add a varying number of divs to a container, and have them align to 'gravity', as in the bottom row fills up first, then the next row, and the top row may be incomplete.
it's basically a reverse of the standard flex-wrap, but I don't seem to be able to find how to do it.
I'm doing:
display: flex;
flex-wrap: wrap;
align-content: flex-end;
but the incomplete row is still on the bottom.
Is javascript going to be necessary?
Any pointers appreciated :-)
You need to use wrap-reverse instead of wrap.
section {
display: flex;
flex-wrap: wrap-reverse;
gap: 20px;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</section>
I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
I have been studying CSS flex recently and was trying out some simple tasks with it. One of these tasks was to make a timeline with alternating elements being above or below a mid-line.
I would like to be able to set an initial width and a fixed height, so that when the content exceeds the height of the div and overflows, the width will expand to accommodate the content, and hopefully there will be no overflow.
https://codepen.io/anon/pen/roVOXB
<div class="content">
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
</div>
.content {
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.above, .below {
height: 350px;
display: flex;
min-width: 300px;
border: 1px solid #000;
}
.above {
display: flex;
align-items: flex-end;
background: orange;
}
.below {
display: flex;
align-items: flex-start;
background: aqua;
}
I know it might be a simple solution and its staring me right in the face, but I have tried everything with max-widths, max-heights, overflows and wrapping the text but nothing can help me achieve the desired outcome so far.
I would really appreciate any help. Thanks!
You can change the elements dynamically using the following JS:
var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
if(Ele.scrollHeight > 350){
Ele.style.minWidth = (Ele.scrollHeight) + "px";
}
});
What is does it iterate through all the elements with classes below and above, then checks if it uses more height than the height: 350px, if it is > 350px, then it will adjust accordingly.
Just add the above JS code in your codepen JS editor, and you're good to go. Try adding more content to it and it will dynamically change the width w/o overflow.
If the number of columns is static, you can remove the min-width from .above, .below.
Add min-width: 2700px; to .content.
I'm needing to create CSS classes that can display content similar to this design image here: design concept
Obviously, the code statements themselves don't matter. But how can I create CSS that could wrap the containing content as seen in the image and have that work to n nested containers? I've been playing around with div tags and display: inline-block styling but nothing is working out.
Here is what I currently have, using flex-box. This is almost what I need except that the "rows" aren't setting their width to fit the text content as it just sets the width of everything to the largest width child... seems that this approach might not be possible.
.container {
display: inline-flex;
flex-direction: column;
padding-left: 15px;
}
.containerRow {
display: flex;
flex-direction: column;
justify-content: center;
height: 35px;
margin: 5px;
}
.dropContainer {
height: 70px;
border: 1px solid #ccc!important;
background-color: white;
color: black;
}
.purple {
background-color: #872A61;
color: white;
}
.green {
background-color: #478B26;
color: white;
}
<div class="container purple">
<div class="containerRow">
if (something == true) then
</div>
<div class="container green">
<div class="containerRow">
<div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
Use margins or padding styles with percentages to achieve the nth term.
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>