Hi.
Where can i find Grid CSS COMPLETE documentation?
E.g.: What is the difference between 'ui-grid' and 'ui-g' css class?
How to use 'ui-g', 'ui-md-*' and 'ui-lg-*'?
Thanks.
Grid Css Documentation? (how to use ui-g? ui-md? ui-lg?)
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
ui-grid is the old one and ui-g is the new one.
I'd suggest reviewing the showcase and user guide;
http://www.primefaces.org/showcase/ui/panel/grid.xhtml
I'd suggest reviewing the showcase and user guide;
http://www.primefaces.org/showcase/ui/panel/grid.xhtml
Hi optimus.prime!
First, thank you for your time.
I have read the content of http://www.primefaces.org/showcase/ui/panel/grid.xhtml and the user guide few times,
but they do not explain the details of using 'ui-g* ui-md-* ui-lg-*'.
But, I am getting there.
Now, I have another doubt about the same thing: how to use 'ui-g*' with p:panelGrid ?
Seems like panelGrid uses ui-grid and ui-grid-row which seems incompatible with 'ui-g*'.
E.g.:
<p:panelGrid columns="4" styleClass="ui-g" columnClasses="ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5,
ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5"
layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel for="input" value="Input"/>
<p:inputText id="input"/>
<p:outputLabel for="area" value="Textarea"/>
<p:inputTextarea id="area"/>
</p:panelGrid>
Thanks again.
First, thank you for your time.
I have read the content of http://www.primefaces.org/showcase/ui/panel/grid.xhtml and the user guide few times,
but they do not explain the details of using 'ui-g* ui-md-* ui-lg-*'.
But, I am getting there.
Now, I have another doubt about the same thing: how to use 'ui-g*' with p:panelGrid ?
Seems like panelGrid uses ui-grid and ui-grid-row which seems incompatible with 'ui-g*'.
E.g.:
<p:panelGrid columns="4" styleClass="ui-g" columnClasses="ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5,
ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5"
layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel for="input" value="Input"/>
<p:inputText id="input"/>
<p:outputLabel for="area" value="Textarea"/>
<p:inputTextarea id="area"/>
</p:panelGrid>
Thanks again.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
The classes of Grid css aren't supported by p:panelGrid for now. Therefore, you can create a github issue; https://github.com/primefaces/primefaces/issues
Github Profile: https://github.com/mertsincan
-
- Posts: 1
- Joined: 23 Apr 2018, 11:40
+1 here.
Honestly, Primefaces doc is poor to say the least.
I'd be personally ashamed if I were to deliver something production-ready, even though being free, without clear pointers and "howtos" which are lacking in your documentation. Take the "getting started" article... for starters.
Sorry, I'm thinking of moving out of Primefaces due to your miserable documentation.
Really hope you improve that.
Honestly, Primefaces doc is poor to say the least.
I'd be personally ashamed if I were to deliver something production-ready, even though being free, without clear pointers and "howtos" which are lacking in your documentation. Take the "getting started" article... for starters.
Sorry, I'm thinking of moving out of Primefaces due to your miserable documentation.
Really hope you improve that.
The documentation (pdf, showcase, source, forum) is not that bad.
From the PrimeFaces 6.2 documentation of the Grid CSS
If you actually encounter things missing, feel free to report them. Just 'ranting' in not very helpful.
From the PrimeFaces 6.2 documentation of the Grid CSS
So it is all there...Responsive
Responsive layout is achieved by applying additional classes to the columns whereas ui-g-* define the default behavior. Four screen sizes are supported with different breakpoints.Most of the time, ui-md-* styles are used with default ui-g-* classes, to customize small or largeCode: Select all
Prefix Devices Media Query Example ui-sm-* Phones max-width: 40em (640px) ui-sm-6, ui-sm-4 ui-md-* Tablets min-width: 40.063em (641px) ui-md-2, ui-sm-8 ui-lg-* Desktops min-width: 64.063em (1025px) ui-lg-6, ui-sm-12 ui-xl-* Big screen monitors min-width: 90.063em (1441px) ui-xl-2, ui-sm-10
screens apply ui-sm, ui-lg and ui-xl can be utilized.
If you actually encounter things missing, feel free to report them. Just 'ranting' in not very helpful.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 25 guests