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*/
}
Related
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>
There is really many panels on my site. Each of them has a div with items-container class and inside of it there is a few item divs (all you can see in example code below). To style them all I created "global" styles (let's call them global) which work on all panels, but there are a few I want to have different styles.
To change the styles of top-container panel, I need to copy all global styles and override every single one of them under new selector (top-container).
Is there any other way to change the styles of my top-container panel than to override each of it separately?
JS solutions are also welcome (if there are any...).
Here is a demo: LINK
And here is the code:
<div class="top-container">
<div class="top panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
</div>
</div>
</div>
<div class="middle">
<div class="left panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
<div class="right panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
</div>
CSS:
.top-container {
width: calc(100% - 4px);
height: 50px;
}
.panel {
border: 2px solid black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.middle {
width: 100%;
height: 250px;
display: flex;
flex-direction: row;
margin-top: 10px;
}
.items-container {
display: flex;
flex-direction: column;
text-align: center;
}
.item {
font-weight: bold;
}
.top-container .items-container {
display: block;
}
.top-container .items-container .item {
display: inline-block;
}
I write the styles in SASS, but jsfiddle somehow didn't work even when I changed the language.
This is a simple example. I know it's not much work to change two lines of code (in this case), but my real project is much more complicated and overriding styles = hundreds of additional lines of code...
As you mentioned !
To change the styles of top-container panel, I need to copy all global
styles and override every single one of them under new selector
(top-container).
The easiest way is to make a global class which you already did .panel. Now if you want to give any of panels a different style, either add a new class <div class="top panel panel1"> or select by child selector .middle > .left or select by nth-Child().
Here is your updated Fiddle with my example.
Hope it will answer your question.
I've displayed my elements using the flex property and flex-flow: column nowrap. I've made quick display of what my elements look like :[this]
So obviously I can't just stack both of the column on top of each other because I'm using ajax call to number each element, my left column is for even number and the right one for odd numbers. I'm wondering how I could achieve this without breaking my code. I'm doing this so that it can be responsive for mobile users.
I dont get why you want to do it this way?
You could just make it into rows, with a placeholder that you remove, when screen size gets to small. That way, you can keep it all simple and clean.
- container
-- row
--- box
--- placeholder
--- box
--- placeholder
Like this: http://jsfiddle.net/d9jg1p2s/
EDIT: Forgot to remove placeholders on mobile size.
Here you go: http://jsfiddle.net/d9jg1p2s/1/
There is no method to merge containers in flexbox but there is a method for the containers to be treated as though they were not there.
It's display:contents
Browsers (excepting Firefox) will remove any element with a display value of contents set on it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
MDN
Support, unfortuately, is not universal but is growing.
Then..just align each alternate element in the "new" column to align-self: flex-end;
* { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing:inherit; }
.box {
display: flex;
justify-content: center;
align-items: center;
width:150px;
height:150px;
border:2px solid rebeccapurple;
}
body {
width: 55%;
min-width:150px;
margin:1em auto;
border:1px solid limegreen;
display: flex;
flex-direction: column;
}
.box:nth-child(odd) {
align-self: flex-end;
}
.container {
display:contents;
}
<div class="container">
<div class="box">1</div>
<div class="box">3</div>
<div class="box">5</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">11</div>
</div>
<div class="container">
<div class="box">2</div>
<div class="box">4</div>
<div class="box">6</div>
<div class="box">8</div>
<div class="box">10</div>
<div class="box">12</div>
</div>
I'm trying to create my own small grid system based on CSS3 flex display. I basically have the following classes:
a grid class, which is a flex container with flex-direction set to column.
a row class, which is a flex container with flex-direction set to row.
set of column classes of different flex-basis sizes.
What I want is to be able to align each row to the left/center/right by setting the self-align property of the row element. However, whenever I try to do it, things seem to go bad.
Here is a plunker that demonstrate it:
http://plnkr.co/edit/mHOs7U28GCBJuPvi7ikJ?p=preview
HTML
<!-- first row -->
<div class="row align-end"> <!-- try to remove 'align-end' here -->
<div class="column-1">
<div class="item">1</div>
</div>
<div class="column-1">
<div class="item">2</div>
</div>
</div>
<!-- second row -->
<div class="row">
<div class="column-1">
<div class="item">3</div>
</div>
<div class="column-2">
<div class="item">4</div>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.grid {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.column-1 {
flex-basis: 33.33%;
padding: 10px;
}
.column-2 {
flex-basis: 66.67%;
padding: 10px;
}
.column-3 {
flex-basis: 100%;
padding: 10px;
}
.align-start {
align-self: flex-start;
}
.align-center {
align-self: center;
}
.align-end {
align-self: flex-end;
}
.item {
background-color: lightblue;
font-family: "Arial";
text-align: center;
padding: 4px;
}
As you can see, In this plunker I set up a grid with two rows, with two columns in each row. The two columns in the first row have a width of 33.33% (flex-basis). In the second row, the first column's width is 66.67% and the second column is 33.33%. Now, since the first row has some unused space, I want to try to align it to the right (for whatever reason). Therefore, I add to the div that represents the first row the class align-end, which basically just adds the property align-self: flex-end; to the element.
As you can see, by doing so the first row looks bad, both columns are aligned to the right, but their width is totally corrupted (you can try and remove the class 'align-end' from the first row, and things will get back to normal).
What am I missing? Why the row doesn't align correctly to the right?
Thanks,
Roy.
The property that controls how the children are aligned along the main axis is justify-content
.align-end {
justify-content: flex-end;
}
plunker
is this whats you're going for?
http://plnkr.co/edit/bFWMSQ7qj4Cuomzm0Ptv?p=preview
Looks like you had 2 column-1 class in the first row
<!-- first row -->
<div class="row align-end"> <!-- try to remove 'align-end' here -->
<div class="column-1">
<div class="item">1</div>
</div>
<div class="column-1">
<div class="item">2</div>
</div>
</div>
********edit*********
after some digging i think i know what you mean.
you are trying to left align the first box and right align the second box leaving a blank in the middle.
if you add margin-left: auto; it takes care of the rest of the space left in the row.
http://plnkr.co/edit/1Eoeh4uOik3BIZHsL9bH?p=preview
i added it to the align-end class so whenever you use align-end, it will add the margin-left:auto; to that box.
I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH
You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!
Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table