Not able to float ListItem right in List - javascript

I have an array containing object which needs to be displayed in ListItem of List. Now i want to display these ListItems from array Objects in 'left' - 'right'. Odd number needs to go in left and Even in right but float:right is not working. Here is my CodeSandBox link.
list: {
marginTop: "8%",
float: "right",
marginBottom: theme.spacing(2)
}
What's wrong in my code?

you can use this css code for reverse your div. If the div displaying as a flex
flex-direction: row-reverse
if not displaying as a flex
display:flex
flex-direction: row-reverse
check the example below
.block {
padding: 10px;
margin: 10px;
background: red;
}
.without-reverse {
display: flex;
}
.with-reverse {
display: flex;
flex-direction: row-reverse;
}
<div class="without-reverse">
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</div>
<div class="with-reverse">
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</div>

Related

Add space and keep elements on the right side

I have these 2 children elements and I want them on the right side(I have that working just fine), but now I want to add more space between them and having a hard time to get that to work. Can someone tell me what I'm missing, please? thanks
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
<section>
<button>Cancel</button>
<button>Confirm</button>
</section>
gap property can help you
section {
background: yellow;
display: flex;
justify-content: flex-end;
gap: 5px;
}
dont create more containers if you can avoid this. This is my principle
You can assign a default class to your buttons, or set a new class to your elements, and specify (for example) a margin that will be applied.
consider the following example:
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
.elementContainer{
margin: 5px;
}
<section>
<div class='elementContainer'>
<Button variant="secondary">Cancel</Button>
</div>
<div class='elementContainer'>
<Button variant="primary">Confirm</Button>
</div>
</section>
This will add a 5px margin around each item with the element class.
you may change this style according to your needs.
You can use column-gap
So try this:
HTML:
<section>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Confirm</Button>
</section>
CSS:
section {
background: yellow;
display: flex;
justify-content: flex-end;
column-gap: 10px;
}

Flex only for two out of three elements

I have 3 seperate elements all in one container/wrapper.
I have flex applied so the image and Text are side by side. However i want the "Scroll Down" div to be placed underneath the other two elements while still using Flex.
Is there any flex property to somehow only apply Flex on the two first elements?
Image:
https://gyazo.com/a391508e26aff2486103579134c051e1
<section class="home-section">
<div class="home-wrapper">
<div class="home-column">
<div class="home-row">
<h1>Centuries Gaming</h1>
<h2>Roleplay on a different level</h2>
<p>From the aspirations and dreams of others, we stand tall, proud, and loyal
to our visions and project. We provide the best and most immersive...</p>
<div class="home-buttons">
<div class="home-button home-button-left">
Apply
</div>
<div class="home-button home-button-right">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="home-row">
<div class="home-image">
<img src="images/home-image.png" alt="Vehicle Drifting">
</div>
</div>
</div>
</div>
<div class="home-scroll">
<button>
<span>Scroll Down</span>
<img src="icons/mouse.svg" alt="Mouse Scroll Icon">
</button>
</div>
</section>
/* Home Section */
.home-section {
height: 100vh;
display: flex;
align-items: center;
}
.home-column {
display: flex;
}
.home-row h1 {
font-size: 60px;
color: white;
font-weight: 700;
margin-bottom: 7x;
}
.home-row h2 {
font-weight: 500;
color: #ffffff80;
margin-bottom: 20px;
}
.home-row p {
color: #ffffff80;
font-size: 14px;
max-width:600px;
}
.home-row .home-buttons {
display: flex;
margin-top: 50px;
}
If you add flex-direction: column; to .home-section then the parent element will display its children vertically. And the scroll element will be below the order elements.
You can use flex-direction:column
.home-section {
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}
The default is row, but you can change that property to stack the elements vertically. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Show/hide a div child on hover without javascript

i have a bunch of repeating cards:
<div id="container">
<div class="card">
<div class="card_img"><img src="/img.jpg"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
...
<div class="card">
<div class="card_img"><img src="/img.jgp"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
</div>
the container style is something like:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
the card style is something like:
.card {
flex: 0 0 13em;
}
my goal is to have the more info text (div), appear when i hover the card; since the cards contain a product coming from the database i can surely add the product id as class both in card and in moreinfo and target it by name with a javascript, but im wondering if i can change the display of the div, targeting it as the child of the div im hovering
.card_moreinfo {
display: none;
}
.card_moreinfo:hover + card_moreinfo{
display: block;
}
source: Using only CSS, show div on hover over <a>
You need to use the :hover for displaying or hiding the child.
Example;
.card_moreinfo{
display: none;
}
.card:hover .card_moreinfo{
display:block;
}
.card {
flex: 0 0 13em;
}
.card:hover {
/*add your css*/
}

Make horizontal scrolling parent to take up the width of its childs

I am trying to make a horizontal scroller using flex. The problem is the parent of flex items is not taking the complete width of all the childs.
The problem is that the childs are using flex: 0 0 9% and there is no fixed width defined on any of the parents because I want to make it flexible.
So, I have made a simple structure in codepen to show what I am trying to do.
https://codepen.io/khubaibqaiser/pen/WVGZZW
for (var i = 0; i < 100; i++) {
$("#itemContainer1, #itemContainer2, #itemContainer3").append(`<div class="item">Child ${i}</div>`)
}
.parent {
display: flex;
flex-direction: column;
width: 100%;
background: red;
overflow: auto;
}
.row {
display: flex;
flex: 0 0 auto;
background: yellow;
margin: 10px 0;
}
.item {
flex: 0 0 9%;
background: green;
margin: 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div id="itemContainer1" class="row">
</div>
<div id="itemContainer2" class="row">
</div>
<div id="itemContainer3" class="row">
</div>
</div>
Ideally the width of .row div should take up the width of all its children.
The horizontal scroll was there, maybe because of your background color in parent, change the color to blue, then you will be done.

Aligning divs using the baselines of child divs in css

I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:
However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:
I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.
var fitSizes = function () {
var h = 0;
$('h1').each( function(){
if(h < $(this).outerHeight()) h = $(this).outerHeight();
// select biggest height
});
$('h1').each( function(){
$(this).outerHeight(h);
// set all h1 heights to the biggest height
});
};
fitSizes();
But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?
Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.
I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.
TOP DOWN APPROACH // fixed header height
There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".
<style>
.wrapper {
height: 2.5rem;
line-height: 2.5rem;
text-align: bottom;
// flex approach works too
}
h1 {
line-height: 1rem;
}
</style>
...
<div class="container">
<div class="wrapper">
<h1>title</h1>
</div>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
"BOTTOM UP" APPROACH // fixed content
This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.
<style>
.container {
text-align: bottom;
}
h1 {
line-height: 1rem;
}
.content {
height: 15rem;
overflow: elipsis;
}
</style>
...
<div class="container">
<h1>title</h1>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
You could do it with flexbox, you could set make the outer div's siblings by making a container around them and do something like this:
.container {
display: flex;
align-items: flex-end;
}
If this does not fulfill your needs you could also try and see if align-items: baseline; fixes it. Just have a look at flexbox.
What You are looking for using flexbox.
.root {
display: flex;
height: 300px;
border: 2px solid black;
}
.container {
display: flex;
/* position at bottom of container */
margin-top: auto;
/* spread inside container */
flex-grow: 1;
/* align items in row and center it verticaly */
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
margin: auto 5px 5px;
padding: 20px;
/* spread inside container */
flex-grow: 1;
/* align items in column, and position content at the bottom */
flex-direction: column;
justify-content: flex-end;
border: 2px solid blue;
}
.row {
margin: 5px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
<div class="root">
<div class="container">
<div class="column">
<span class="row">row one</span>
</div>
<div class="column">
<span class="row">row one</span>
<span class="row">row two</span>
</div>
</div>
</div>
Flexbox is something up and coming that would be really useful to use. It's only growing in popularity.
This can answer many different problems. Such as your justification issue.
Here's a simple fiddle with little code that shows the answer to your problem: https://jsfiddle.net/hkLk53c6/
HTML:
<div class="container">
<div class="flex-item">
Item
</div>
<div class="flex-item">
Item
<br>
Item
</div>
<div class="flex-item">
Item
<br>
Item
<br>
Item
</div>
</div>
CSS:
.container {
display:flex;
justify-content: space-between;
border: 1px solid #333;
}
.flex-item {
width: 33%;
text-align: center;
background: #120321;
color: #fff;
}
Here's a link to Chris Coyier's explanation about Flexbox Properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've personally found it very useful in learning more about flexbox.
You can styled based off of the baseline, you can reverse elements, justify them to be the same height both vertically and horizontally. Etc. It's very exciting because now we can get past some hacky fixes. (Like using JS which trust me, you're not the only one to do so far!)

Categories