I have built a dashboard using ion-grid and just one ion-row. the ion-row contains 10-12 ion-col. So basically, as soon as the screen width is hit the columns starts to flow down.
This all is good and as expected. However, the problem starts when these columns are of varying width and heights. I have defined the col of 3 width types: 200px, 400px and 600px. The height is also of 3 variations 200px, 400px and 600px. So overall each col can be either a 1*1, 2*1, 1*2, 2*2, 3*1 and 3*2 size.
I am using dragula to be able to drag and drop the titles to adjust the layout as desired. However, initial layout always renders with some holes though they can be filled by manual drag drop.
So, what should be the right way to handle it at the initial time to avoid the holes in the layout.
You probably could use css flex grow. Use one parent div for each row and set css as
.row {
display: flex;
justify-content: center;
align-items: center
}
for each column use flex grow to define their sizes.
eg. flex-grow: 1 - for normal, flex-grow: 2 for bigger width.
here I have attached what I have did. In my case, the column numbers should be dynamic, but having the same with.
Related
Please see the code below:
ul {
display: flex;
list-style-type: none;
flex-wrap: wrap;
}
li {
flex-grow: 1;
border: 1px solid;
width: 1000px;
}
<header>
<ul class="child">
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
</ul>
</header>
Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.
Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px). It appears to me that the behaviour is as follows:
If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.
If a width is added to the flex items meaning they cannot all fit on one row then honour the width.
If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.
Have I understood this correctly and why does the width effect the flex items like this?
I have done my own research and found questions like this: What are the differences between flex-grow and width?. However, I have not found an answer to my question. I have also read about the flex grow property here: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-grow-property
It's important to note that width, height and flex-basis in a flex container represent the initial size of the item.
Once that size are determined, then flex-grow and flex-shrink enter into the picture and do their work, if possible. That can change the initial size.
Now, let's break down your question into the main points:
Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.
OK
Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px).
Do you mean "e.g., 372.28 pixels (not 1px)", not "i.e.", because the size of the item will vary depending on the size of the viewport. In other words, the size of each item will scale as you resize the window. But this is not an essential point.
All boxes are indeed equal length. This happens because the width is set to 1px.
If you were to remove the width rule, then the boxes would vary in length based on their content length. This is because the default width / flex-basis is auto.
If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.
Not necessarily.
The width property doesn't always relate to items all fitting on one row. That behavior is controlled by the flex-wrap and flex-direction properties.
Also, the width property doesn't always relate to items all having equal length. Other factors, such as flex-grow, can have an impact.
If a width is added to the flex items meaning they cannot all fit on one row then honour the width.
Not necessarily.
flex-grow, flex-shrink and flex-wrap can all have an impact.
If you want the width / flex-basis of an item to remain fixed, set both flex-shrink and flex-grow to 0 (which disables those functions).
If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.
Not necessarily.
flex-grow, flex-shrink and flex-wrap can all have an impact.
More details:
Make flex-grow expand items based on their original size
Flex items are shrinking below flex-basis
I have some table that set width for elements so some columns will have at least some percent of a width of the container.
I want to use flexbox to center this table and set the minimum-width for it.
The goal is to have centered table with some minimum width for which some columns will have the same width (same ratio).
If some cells have longer texts then I don't care if ratio will broke (width of this column will be bigger then other). I just care that it has nice and same width of columns for common case (small amount of text data in cells)
I was able to came up with solution that works on Firefox and Chrome (link).
But for Edge and IE11 the table stretch as if it was not in flex container (try to comment display: flex; on Firefox or Chrome and the result is stretched table like on Edge.
Also it looks that sometime setting columns work (link2). But I don't see the pattern of when it break in Edge/IE11.
Here is more production example that I want to achieve (works in Chrome/Firefox, stretch in Edge/IE11): "production" table example.
Any ideas how to achieve what I want on Edge/IE11? (I put in bold what I want to achieve).
It would be good if I could keep using flexbox container (it might require more changes in my codebase) but I think I will be fine with deleting style=width:p% from <col> if that's necessary.
The min-width rule is apparently being ignored in Edge / IE11.
There's an equivalent command that seems to work.
Instead of:
.inner {
min-width: 800px
}
Use:
.inner {
flex-basis: 800px; /* 1 */
flex-shrink: 0; /* 2 */
}
revised codepen
notes:
flex-basis is a substitute for width, in this case (see: flex-basis vs width)
flex-shrink: 0 ensures flex-basis / width cannot decrease below 800px (hence, both rules together emulate min-width)
Even though I am know Foundation is responsive, I am trying to craft precise photoshop documents with certain breakpoints and trying to understand how foundation establish the grid elements sizes (by default).
Let's say for example a media query of // XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ 12 columns
Question1: are the gutters applied by default? or the by default the system applies no gutters, just pure columns?
Question2: does foundation applies outer gutter (or outer margins) automatically?
Question3: what is the total width for a non full-width row considering screensize of 1920?
Question4: what are the sizes of the columns, gutters in this case of screen width of 1921?
Question5: how should I prepare my document if I want to follow defaults with the new XY grid?
In addition to the documentation info that was uncovered, I found out more information on the new XY Grid by contacting Zurb:
The XY Grid is the Default grid in 6.4+
No gutters by default. Cells can get spacing in the form of margin or padding
If you add spacing between cells, it will apply on both sides of each cell.
The default width of the grid-container is 1200px. This can be changed easily. You can create a grid that is fluid width as well.
Cells are a % of the grid container or the screen width. So if you have 4 cells in a grid using the medium-3 class, each will be 25% of the width. You can also have cells be auto or shrink size. Shrink will take up the width of the content inside, and grow will expand to fill remaining space.
Find answers to all your questions by reading the Foundation for Sites 6 Docs >>
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn