I want to start using css grid. With grid, there is no <tr> element. All top level children of a grid container become cells. The layout engine breaks them into lines based on their attributes, and the number of columns in the grid-template-columns rule. And there's the rub: without a <tr>, where do I put my v-for? Each iteration of v-for needs to generate n elements. I need a magic disappearing element that leaves no trace in the rendered output (no trace of itself, but renders all it's children). Does this exist? How do people deal with this?
Ok found it. Here's a little record if anyone follows me here.
Put the v-for on a template element.
Related
We are on 6.5.3. Like in CSS/bootstrap, there is a property to add the spacing between grid columns. I would like to know if there is any way to achieve this in AEM Grid? We need to add some gaps to ensure content doesn't stick together when content is placed inside the column grids. Modifying the grid.less is an option that we are thinking of as last resort, but we would like to check if there is a declarative way from the AEM grid, for example specifying the spacing in some property.
There is no property for padding/margin in AEM grids by default, this is the reason we have grid.less file in place OOTB. But,you can edit and add a property in your templates for that.
Although, this is not the best approach
If you want to add default spacing in all the grids, you have to do it in grid.less.
This would be even worse, as these changes would be global
A Better Approach
I would suggest to create a spacer component instead of adding a default padding in all grids. That way, when you don't want padding in your grids you wouldn't get stuck again.
Content Authors can just add a spacer component(or multiple) in between different components depending upon the size of padding/margin you need.
Customizing AEM Grid
I'm in the process of converting a CSS/HTML/JS design from a static HTML design into an Ember application. The design uses flexbox for all layouts.
For the sake of this post, lets say my design has 3 columns inside a flexbox wrapper. The left and right are 250px wide and the middle is set to "flex: 1" so that it uses up all the unused space. The left column is also a flexbox wrapper, which has four rows. Three of the rows have fixed heights and the 4th is set to "flex: 1" to use up the unused space.
In Ember, I have generated 2 components for each of the 250px columns. The middle is my outlet, which renders my routes. I have taken the columns and placed them in their respective .hbs files and placed the helpers in application.hbs. They are rendered but "flex: 1" seems to be ignored when the components are rendered. This results in any that are supposed to take up all unused space, not doing so.
Just as a note, if I place all code from my HTML file into my application.hbs file, it renders fine.
Any help would be much appreciated.
Thanks!
Solved this. When using component helpers you have to apply the wrapper class(es) to the helper directly or else you'll end up with a wrapper in a wrapper or blocks without wrappers as Ember will apply a default class if none is defined
{{main-nav class="main-nav-wrapper"}}
I have modified the styles to change the color of the grid rows as well as text. This works fine when the grid is used by itself, but when using expandable rows, the expanded rows do not inherit the properties defined on the main grid. Instead, it is trying to use the original styles that come out of the box. Does anyone know how to make the expanded rows use the same css as the main grid?
I recently found Foundation5 has Block Grid which has rarely found use case online anywhere to demostrate the importance of using it... or is it even a great function to have? Because I am currently using Bootstrap3 and found it does not have Block Grid. So I wonder if its really a big feature one should watch out for.
Maybe some critical user case that will be so much better to use Block Grid other than Column based Grid.
Thanks!
There are several differences between the block grid and regular column grid..
The block grid is always evenly spaced and distributed
The block grid requires less markup
The block grid doesn't have inner padding
Take a look at this demo: http://codeply.com/go/XiyFxtMcXT, and you'll see the differences. Notice how the block-grid evenly wraps the items when the items exceed one row.
Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.
You could just as easily use a percentage based grid system to achieve the same result.
I think the benefit of the 'block grid' is:
Items are displayed in a 'ul' which will group them together (good, for accessibility).
It's quicker to add one style to a 'ul' that will automatically make each 'li' a 'column' than it is to add "col-x" to each 'li' manually
They've already built it so you don't need to.
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.