I am sure there is an easy way to solve this, but I'm at my wits end:
I have the following layout:
With the following simple CSS:
.row {
width: 100%;
display: flex;
align-items: center;
margin: 15px 0px 0px;
}
.label {
flex: 0.5;
}
.field {
flex: 1;
}
However, I want the fields next to Label 2 through 4 to look like this:
How can I achieve this? I want a maximum width of around 100px. If it set max-width: 100px; I get this:
Which I guess is from the flex: 0.5; I gave the label. I could obviously set the margin-left of the field to negative-something, but that stops working when I resize the window.
Thank you!
I think you need to define the flex-basis of your label-element, in a responsive unit like %, as you intent to always have a "hard" left edge.
Like so:
flex: 0 0 20%;
Codepen example
Related
Facing an issue with a css property (Flex) . I have multiple cards and i want it to be 4 cards per row so that irrespective for screen size it will always have 4 cards per row. Since i am using display element as Flex it adjusted according to screen size. Very new to this front end dev work, can you please check and fix my CSS property to align 4 cards in a row.
here is the code:
https://codesandbox.io/s/tender-feynman-we6n9s?file=/src/productsConfig.js
Basically here i want 4 cards per row.
You can add flex-basis, it sets the size of the content box, so your css flex-basis: 25% on class .react-card-flip
Update
if you don't want increase your space then try this:
.react-card-flip:nth-child(3n+1):not(:first-child) {
break-after: always;
}
this code just simply found your 4th element and add a break on it. Just try to decrease your page using ctrl + scroll your mouse to see. It max 4 cards per row.
try on sandbox
Using flex, and since you want the width of the cards to be fixed (300px), and assuming you're only working on large screens, to guarantee displaying 4 elements of 300ps in a row, it's best to also set the width of the parent to 1500px for example, in this case only 4 elements with margins, paddings will be displayed in a single row.
.container {
display: flex;
flex-wrap: wrap;
width: 1500px;
justify-content: center;
margin: auto;
}
.react-card-flip {
flex: 1 0 300px;
border: 1px solid red;
margin: 5px;
min-height: 50px;
}
<div class="container">
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
<div class="react-card-flip"></div>
</div>
Try with adding this style to your style.css file for responsive auto card wrap on space.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: calc(25% - 40px);
margin: 20px;
}
I thought the problem is "incorrect level".
Press "f12" in https://we6n9s.csb.app/, then you will see the 1st level is "container".
The 2nd level is "react-card-flip".
The 3rd level is "react-card-flipper".
The 4th level is "react-card-front".
The 5th level is "card".
Maybe you could use .react-card-flip but not .card
.react-card-flip {
position: flex;
flex: 1 0 22%;
border: 1px solid red;
width: 22%;
height: 300px;
min-height: 50px;
}
I would like to make a row consisting of three columns, where the left column is always on the left, and the right two columns are joined together (i.e. wrap together to the next line, if there is not enough space). This is easily achievable using flex and may look like this: https://jsfiddle.net/znxn9x1r/
The catch here is that I would also like the middle column (violet colored always-right/left) to be shrinkable up to some min-width using text-overflow: ellipsis. This means that when I start lowering the width of the page, the middle column should first start shrinking, and only after it is no longer possible, then the right two columns should wrap to the next line.
A mockup of what I want to achieve:
Then when the shrinking reaches the min-width of the middle column, it should wrap to the next line as before:
Now if there was no left yellow column and the whole row consisted only from the two right columns, I could use the answer from the following question: How to keep a flex item from overflowing due to its text?
This really behaves like it should, but only after the right group already wraps:
It does not shrink the middle column when it is still on the same line as the first yellow column:
^^ This should not happen, there is enough space for an ellipsis!
Here is my code, is it possible to achieve what I want with pure HTML/CSS?
* {
padding: 5px;
}
#container {
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
}
#always-left {
background-color: yellow;
margin: auto;
margin-left: 0;
}
#right-group {
margin: auto;
margin-right: 0;
display: flex;
}
#shrinkable {
background-color: violet;
vertical-align: middle;
order: 1;
flex: 0 1 auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#not-shrinkable {
background-color: lightblue;
vertical-align: middle;
order: 2;
flex: 1 0 auto;
}
<div id="container">
<div id="always-left">
always-left
</div>
<div id="right-group">
<div id="shrinkable">
always-right / left
</div>
<div id="not-shrinkable">
always-right / right
</div>
</div>
</div>
https://jsfiddle.net/mnmyw245/
One method that may work for you involves disabling flex-wrap: wrap on the flex container.
#container {
background-color: lightgreen;
display: flex;
/* flex-wrap: wrap; <-- REMOVE THIS */
}
This forces everything to stay on the same line.
Then, when you feel it's okay for wrapping to begin, restore wrap with a media query.
This takes wrap control away from the browser and puts it in your hands.
Here's an example:
#media ( max-width: 200px ) {
#container { flex-wrap: wrap; }
}
revised fiddle
I tried to get two divs next to eachother. The right one has a fixed width, but the left one has to be able to resize. I tried multiple ways, but none fit all my requirements:
Right one has fixed width
Parent div has height of largest child (wraps its childs)
Left one has to resize
Html structure has to in this order (reason at bottom):
html:
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
I tried absolute positioning the right div and adding a margin on the left one and it achieved all requirements, except that the parent div doesn't wrap the largest child (as expected)
http://jsfiddle.net/0fxL71xL/3/
.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}
I also tried using inline-block and max-width but then the divs don't align at the top, and I don't know how to handle the whitespace issue. Most important, it does not make the left div resize: http://jsfiddle.net/0fxL71xL/4/
.container{max-width:400px;}
.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}
I also tried a float right on the right div, but it didn't come near what I wanted.
The closest I got was changing the order in html and using float:right on the div that has to go right, but in this case I can't use an #media query to have it display below the left div at a certain moment.
EDIT:While paulie_d's answer fixes it, I would prefer something that has a large browser support
flexbox can do that.
JSfiddle Demo
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.fixed_width {
width: 200px;
background: #bada55;
}
.variable_width {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: plum;
height: 100px;
}
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
.container {
width:100%;
}
.variable_width {
max-width: 70%;
display: inline-block;
background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
background-color:red;
vertical-align: top;
}
now you can use this code. i think it will work fine.you can add some content in variable width div class and check whether it is working or not.i have checked it and it really works :) .
http://jsfiddle.net/souraj/vaqbsdzk/
After more searching I came across this interesting page which sums some techniques to achieve exactly what I wanted. It gives the most complete answer.
http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/
For some reason, in the following fiddle the nav is not perfectly centered. It's not by much, maybe 3 mm on my monitor, but it has been bugging me why.
http://jsfiddle.net/RMBs6/
Here's a snippet of what I think might be the problematic code (but check the fiddle out too/first):
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 940px;
text-align: left;
}
.nav {
padding: 0px;
text-align: center;
}
Using display: inline-block will mean that your items aren't 'flush' against each other. So having a background will really show this up. I presume that's why you've used the -4px margin on the <a>.
Option 1 - display: inline-block
If you must use display: inline-block then I'd suggest removing the -4px on the <a> and using margin: 0 -2px on the li. That will bring it in on both sides. You can see this working here (note that I took the liberty of making the border only 1 pixel):
http://jsfiddle.net/RMBs6/6/
Option 2 - float
Using float will make the list items flush next to each other. However, using text-align: center on the container won't make it centered now. You'll need to define a width and use margin: 0 auto.
Option 3 - display: table
This is my favourite option. It's a way of making the list items fit perfectly in the container. You won't need to define a width (px or %) on the list items, or the child items. They behave like cells in a table.
http://jsfiddle.net/RMBs6/7/
To show the initial problem clearer (as I understand it), here's a beautiful picture.
It is centered. But it is centering based on the width you specified for the wrapper. Just changed 940px to 500px and it worked nicely here.
If you really want something that work everytime, you can use %.
Something like this:
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
Try putting a max-width on your wrapper
.wrapper {
margin: 0 auto;
margin-top: 3em;
max-width: 940px;
text-align: left;
}
Try
.navigation ul
{
list-style: none;
padding: 0;
width: 90%;
margin: 0 auto;
}
and
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
well as far as I can see, it's not centered about 4px: the 4px you set as negative margin for every link
margin-right: -4px;
getting rid of it and using another method than display:inline-block (float for example) or just remove any white space and line breaks between the list items will do it.
I have a div (#itemSelector) containing a variable type of div (.item). I need to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.
Just for clarity: I want the div's contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.
jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/
Edit: thirtydot suggested a solution to me which interesting looking
Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.
Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I'd like. Any other suggestions like this?
I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.
JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/
EDIT: #Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/
EDIT: #Exelian This is a slightly altered and commented version of the previous code:
http://jsfiddle.net/xTZ8z/88/
I hope that helps!
You could do something like this:
#itemSelector {
width: 100%;
border: 1px dashed red;
margin: 0 auto;
padding: 0;
}
.item {
display: inline-block;
background-color: grey;
width: 25%;
text-align: center;
height: 100px;
line-height: 100px;
margin: -2px;
padding: 0;
}
That should do the trick
Example here
What about a table set to width 100%?