How are flex widths calculated? If I had 3 columns, how would I compensate for removing one of them, i.e. replacing 2 flex columns with 1 and keeping the exact same width. Is it at all possible?
Example:
https://jsfiddle.net/xssyv8y1/
section {
display: flex;
height: 200px;
div {
&:first-child {
flex: 1 0 100px;
}
&:nth-child(2) {
flex: 10 0 400px;
}
&:last-child {
flex: 1 0 150px;
display: none;
}
}
}
Related
I want to show the uptime/downtime of my website with a div containing vertical bars (red, green or no color when no data).
The css for this:
.lines {
height: 50px;
width: 100%;
display: flex;
background: #eee;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.lines > .line {
flex: 1 1 auto;
height: 100%;
border: 0.5px solid #ccc;
}
.line:not(:first-child) {
border-left: 0;
}
.lines > .line.true {
background: greenyellow;
}
.lines > .line.false {
background: red;
}
This gives me the following result with my data:
As you can see, the "colums" (divs) are not equally separated, even though I use flex: 1 1 auto).
JS:
<div className={styles.lines>
{data.map((e,i) => (
<div key={i} className={`${styles.line} ${e.bool === 'true' ? styles.true : styles.false}`} />
)}
</div>
Where is my code wrong?
Looks like a rendering issue, because some lines get truncated as they're less than 1 pixel. The following should solve the issue:
.lines > .line {
...
min-width: 1px;
}
Also note that borders need to be at least 1 pixel, 0.5 px will simply default to 1px.
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I encounter this layout issue a lot:
Small screens - items are stacked in a single row, usually an image followed by some text, then a smaller sub-area for extra miscellaneous:
Medium screens and up - items are reshuffled to 2 columns, image and misc stuff on the left, text on the right:
I feel like I should be able to do this with flexbox, but I can't figure out how. I get that I can arrange the items in columns using:
.container {
display: flex;
flex-flow: column wrap;
}
.one,
.two,
.three {
width: 50%;
}
.one {
order: 1;
}
.two {
order: 3;
}
.three {
order: 2;
}
But the problem is there doesn't seem to be a way to break the items into 2 columns without setting a fixed height, which obviously doesn't work too well for responsive.
Is there a way to force the columns to break at certain points?
You can do it like this. By making width 100% at mobile size. they take up their own line.
.container {
width: 75%;
margin: 0 auto;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: blue;
float:left;
}
.box2 {
background-color: green;
float: right;
}
.box3 {
background-color: purple;
float: left;
}
#media screen and (max-width: 800px) {
.box2 {
float: left;
}
.box1,.box2,.box3 {
width: 100%;
}
}
JSFIDDLE
This question already has answers here:
How to dynamically generate a list of classes with commas separating them?
(3 answers)
Closed 7 years ago.
So I'm creating a very simple grid and want to limit the amount of repeated declarations.
My Scss grid
$columns: 12;
$margin: 10;
$max-width: 1200;
// do not edit these values
$layout-margin-width: $max-width + $margin * 2;
$percent-margin: $margin / $layout-margin-width;
// Grid Container
.main {
max-width: $max-width + px;
margin: 0 auto;
&:before,
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
// Grid Columns
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
float: left;
}
}
Which outputs to
.main { max-width: 1200px; margin: 0 auto; }
.main:before, .main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.grid-1 { width: 6.69399%; padding: 0; margin: 0 0.81967%; float: left; }
//
.grid-12 { width: 98.36066%; padding: 0; margin: 0 0.81967%; float: left; }
That creates a lot of repeating CSS so I'd like to be able to have a list the grid class names together and have float:left etc in a single declaration, like this
.grid-1,
.grid-2,
//
.grid-12 {
float:left;
//other declarations
}
How do I structure the Scss loop to do this?
I think you can do something like this using #extend.
Example
%grid {
float:left;
}
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
#extend: %grid;
}
}
This will then output your css like this.
.grid-1,
.grid-2,
.grid-3 {
float: left;
}
So the default MVC application has the following css (in Site.css) -
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
margin: 1em 0 0 0;
}
.display-field,
.editor-field
{
margin:0.5em 0 0 0;
}
.text-box
{
width: 30em;
}
.text-box.multi-line
{
height: 6.5em;
}
.tri-state
{
width: 6em;
}
What changes are required?
Thanks
This is a css question. What you are seeking is the property called display: inline-block.
What this does it set the element as a block but does not put a page break after and before the element as block would do.
.display-field,
.editor-field
{
display: inline-block;
margin:0.5em 0 0 0;
}