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
Related
I am creating a form using OpenUI5 and I noticed that when I am using the ResponsiveGridLayout layout, the form gets some padding (blue area around the input fields). Please see result here:
http://plnkr.co/edit/G4NrKPMGdN4DACXZgZOg?p=preview
If I am using the GridLayout layout, the padding is as expected:
http://plnkr.co/edit/Yp6Ul7gLDf0t88vMWrWD?p=preview
Any idea how I can get a form with very a small padding (like in GridLayout example), but in the same time I want to be able to use the 12-column grid system so I can set the size on my input fields?
Ideally, the views need to be XML and to use OpenUI5 classes/controls if possible.
You could just swap the responsible style classes using .addStyleClass() and .removeStyleClass().
Not sure if it works, but thats the easiest possible fix I can think of that might be worth a try.
I need to create a GWT application that handle the buying of films. So I have to show in a grid (not in a list, I don't like the view) these cell containing image and info about the film like this:( http://static.ipaditalia.com/wp-content/uploads/2012/11/mzl.sckskoqz.480x480-75.jpg ). I think that I need of a grid showing I think, to obtain something like but I wouldn't know to start. thanks for help!
You can use a simple FlowPanel as a container, and add each image with a float set to "left".
Alternatively, you can use a flex-box model with flex-flow: row wrap on a container.
You don't need any widgets for this. This is simple CSS, and it will give you the best performance and the smallest code size.
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 am working on a joomla 2.5 site and am required to insert a menu module at the the bottom i.e the footer of the template.I have three items in the middle div ( module ).All i want is that there is some spacing between the three items and also that the menu are displayed inline.so i did add a custom class suffix to the module and am using it in the CSS to exactly match the one i truly require but all i get is somehow my padding set to 0 and the padding-left that i specify in my custom CSS isnt applied.
Please help me with its
Display:inline
spacing between the items.
Please note that this custom CSS should be applied to ONLY AND ONLY this module.because otherwise the whole look of the lists and unordered lists of the site changes.
i am new to it so i am able to exactly figure why it doesnt work
First, in order to affect only the module with the menu you will want to add a module class suffix in the module parameters in the advance module options (it looks like you did that with bottom_footer_menu).
Next, margins don't work on inline elements. You will need to either float the LIs or set them to display as inline-block.
I'm working on doing my layout using HTMLPanel in uiBinder.
I want to create some whitespace, lets say 70px of height, in several places on the page, to split up the vertical layout of the widgets.
What is the preferred way to do this? Using CSS or a panel that isn't visible or some other method?
Use CSS. You can write it right at the top of your ui.xml file.
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Hello_Stylish_World