I'm creating a page based on a template to present a query with results table and when i select a result the same data as to be presented on the side as a form.
I have tryed to do it inserting a panel grid layout with some cells, so each cell will have the query form, another to the results table and other details that i have to insert.
This is the basic layout:
When i change the cell poperties so i can see the table and everything else, one of two things happen, the table fills all the page (width) or it stays very small and i have to use the scroll bar to see all the data. What i want is that the table use all the width available in the cell.
Can someone help me doing this with a grid layout or is there another way, such as a stretch layout that i can use?
Thanks
I'd say just use two nested stretch layouts, will give you good and clean result.
<af:panelStretchLayout>
<f:facet name="top">
<!-- fixed size header -->
</f:facet>
<f:facet name="start">
<!-- fixed size menu -->
</f:facet>
<f:facet name="center">
<af:panelStretchLayout>
<f:facet name="top">
<!-- search form -->
</f:facet>
<f:facet name="end">
<!-- right block -->
</f:facet>
<f:facet name="center">
<!-- table -->
</f:facet>
</af:panelStretchLayout>
</f:facet>
</af:panelStretchLayout>
Don't forget to set stretching option for components that need it.
Assuming that menu and header are part of a template which you are using in your page, here is one way to achieve your layout structure
- panelStretchLayout
- facet name="center"
- panelGroupLayout (layout="vertical" styleClass="AFStretchWidth")
- search form
- panelStretchLayout (endWidth="100px" dimensionsFrom="auto")
- facet name="center"
- table ( columnStretching="last" styleClass="AFStretchWidth")
- facet name="end"
- form
How did you define your cells? Set the first and last cell width to a fixed size.
Then the middle cell should have the halign=stretch.
From the doc:
http://docs.oracle.com/cd/E26098_01/apirefs.1112/e17491/tagdoc/af_gridCell.html
This component can stretch a child component if (1) it is the only component inside of the gridCell, (2) the cell's "halign" is "stretch", (3) the cell's "valign" is "stretch", (4) the effective width of the cell is non-auto, and (5) if the effective height of the cell is non-auto.
I suggest using panel grid layout, ADF improved panel grid layout component in version 11.1.2
An ADF application normally starts with a stretchable outer layout container that stretches its children so make the outer layout panel grid with a 100% height row and 100% width
The benefit of panel grid it matches the way HTML tables are laid out, so it offers good performance compared to other ADF layout components.
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
What is the difference between Box and Grid in Material-UI
When to use each one
I'm confused by that
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. Items have padding to create the spacing between individual items. There are five grid breakpoints: xs, sm, md, lg, and xl.
A Box is just that, a box. It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output. But it's a place to put styling rules as needed. It doesn't offer any real functionality, just a placeholder for controlling the styles in the hierarchical markup structure.
I often think of it as semantically similar to the JSX empty element:
<>
Some elements here
</>
But just with some Material UI capabilities:
<Box component="span" m={1}>
<Button />
</Box>
In short:
Box is a more powerful, convenient, and potential replacement for div. You can change it to any HTML elements (e.g. span), but most of the time you will use it as div replacement.
Grid is the syntactic sugar of Grid Layout.
Use Box when you want to group several items and control how they look on the page. For example, you can take several paragraphs and use a box to put a border around them.
Use Grid for setting up a grid layout system for organizing content in columns on the page. Designers will divide the page into 12 columns with the idea that it is more visually appealing to have content aligned along each column or group of columns. Here is an article that provides much better detail on the subject: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
Box
The Box component serves as a wrapper component for most of the CSS utility needs. The Box component packages all the style functions that are exposed in #material-ui/system . It's created using the styled() function of #material-ui/core/styles
Grid
GridBox is the low-level representation of Grid. Except for low-level notebook expression manipulation, GridBox should not need to be used directly. In a notebook, columns of a GridBox can be added using and rows using . or a menu item can be used to start building a GridBox.
Box
The Box component serves as a wrapper component for most of the CSS utility needs.
The Box component wraps your component. It creates a new DOM element, a <div> by default that can be changed with the component property.
Let's say you want to use a <span> instead:
<Box component="span" m={1}>
<Button />
</Box>
This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.
Further Reading
Docs on Box & Grid
I want to reproduce Google's spreadsheet behaviour with frozen first row and first col, in htmlm with little additions. This is done inside a web browser, so it's a site, page or web app (written in React, if that even matters, cuz question is mostly about css). Lets start with layout:
Availble view space of the page is separated in 3 distinct areas:
100% width, variable height Header, attached to top
Main View, occupying space between header and footer
100% width, variable height Footer, attached to bottom
Main View is then gonna to be split into two sections:
Menu of variable width, attached to the left-side
Table view, occupying remaining width
And Table view should have following properties:
Table area is scrollable, except
First row, where table headers must remain always visible
First column, where order No # of item must be always visible
I am stucked of a good and straightforward implementation. I gave up using <table> because it has no power to implement it, so clever <div> handling most probably would do the trick.
My question is How to write css for that layout? Lets omit layout html/jsx, I think its obvious. What css structure and classes would you suggest to me for this particular task?
<amp-carousel
layout="fixed-height"
height="426"
type="carousel"
heights="(min-width:957px) 426px, 376px">
<amp-img src="https://dummyimage.com/400x210/ccc/aaa" height="210"
width="400"
sizes="(min-width: 957px) 400px, 210px">
</amp-img>
</amp-carousel>
The code below works as intended i.e. carousel height changes with screen size but error pops up
The attribute 'heights' in tag 'amp-carousel' is disallowed by specified layout 'FIXED_HEIGHT'.
without the fixed-height layout, horizontal scroll is not working as intended.
I tried reducing duplicate code as written in this page to showcase stories.
You can not use "heights" attribute with layout="fixed-height", read it here https://www.ampproject.org/docs/reference/common_attributes#heights
So basically if you want to have responsive height, go with layout="responsive" and set heights attribute. Otherwise if you are going with layout="fixed-height" you have to duplicate the code with different "media" attribute(as seen in the link you have shared). Which works as, if the media condition is satisfied than only that particular tag will come into play otherwise that will be display none.
I have a spark group with layout set to horizontal. The group contains a bunch of buttons and custom controls (it's kind of like a toolbar).
Every now and then I need to conditionally hide a couple of the elements in the toolbar.
I can set the visibile attribute to false and it hides it, but the layout doesn't change, it leave a big blank gap.
I would like the horizontal layout group to re-arrange the items so that it doesn't leave a gap where the invisible items are.
Is it possible?
Is there an attribute I can use on my element to tell the layout to ignore them and redraw itself?
You will want to set includeInLayout to false or bind it to the visible property. This will make sure that when it is invisible it is not accounted for in the layout.
<s:Label text="Test"
id="myLabel"
includeInLayout="{myLabel.visible}"
visible="false" />