Hi,
Extensions v 6.2.7
I would like a solution to set height property of a Sheet to have a "responsive like" using of the Navigator height.
I want to do a form which have some criteria components (calendar, selectMenu ...) on the header (Div PrimeFaces responsive)
and a panel (BlockUi) on the bottom with a pe:Sheet who is update whith data after validate the criteria.
Height of the bottom will be the most height how it can (each user can have a different resolution and vertical monitor).
How can I do that ? Is there a way to change this property dynamicly ?
- I would like test with height="100%" ==> but this is not work
- I put the Sheet on a panel height = 100% and put height property at blanck like it's say : "This can be left empty, but performance may suffer. " ==> but this is not work, no sheet appear
And of course, it will be very great to adapt this height when user change the screen size of the Navigator .... like this work fine whith width !
Hope this is clear and someone can help me.
Thanks a lot.
Sheet height property for responsive
Sheet uses Handsontable under the covers for the sheet. Here is a great article on sizing the sheet: https://handsontable.com/blog/articles/ ... ndsontable
And you can use "updateSettings" to set those values if you need to just like in this example: https://www.primefaces.org/showcase-ext ... olumns.jsf
Let us know what solution you come up with!
And you can use "updateSettings" to set those values if you need to just like in this example: https://www.primefaces.org/showcase-ext ... olumns.jsf
Let us know what solution you come up with!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
Great, thanks @Melloware for your reply,
I will try and tell you back.
But in Handsontable, they said : "If there are no height and width settings passed in the configuration, the table will vertically and horizontally fill the entire window (again, or any parent element with defined dimensions and overflow: hidden)."
This work fine for the width, but it's not possible to not set height in pe:sheet. Do you think a change for that can be a futur solution ?
I will try and tell you back.
But in Handsontable, they said : "If there are no height and width settings passed in the configuration, the table will vertically and horizontally fill the entire window (again, or any parent element with defined dimensions and overflow: hidden)."
This work fine for the width, but it's not possible to not set height in pe:sheet. Do you think a change for that can be a futur solution ?
Ahh looking at my javadoc the height parameter "The height of the sheet. Note this is applied to the inner div which is why it is recommend you use this property instead of a style class."
so one thing you can try if you want max height is try styleClass="height: 100vh" which is 100% view height or you can try 100%.
so one thing you can try if you want max height is try styleClass="height: 100vh" which is 100% view height or you can try 100%.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
Yes Melloware, it's exactly what I need, but pe:sheet need also a height value in his property (mandatory a number , if not there is a java.lang.NumberFormatException) and then it's apply before the styleClass ...
If I try to put heigth at blanck, the sheet isn't rendered !
If I try to put heigth at blanck, the sheet isn't rendered !
Got it. Can you create a bug on GitHub.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
this is done : https://github.com/primefaces-extension ... issues/597
for now I think you can fix it with your current version with..
Code: Select all
height="0" styleClass="height:100% !important;"
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
I make some test, but it's seem to be more complex because Class is use by the children of global div id="blabla" like this
and the children who content the data layout inherit also the initial height
Make new css for some handsontable table could be resolve the problem.
For now, I will work on the form functionnality for user need and I came back soon on the layout enhancement issue.
Code: Select all
<div id = "blabla_tbl" .. style="height: 0px; overflow: hidden;" data-initialstyle="height:100%!important;height: 0px;" data-originalstyle="height: 0px; overflow: hidden;">
Code: Select all
<div style="position: relative; width: 1573.33px; height: 0px;" class="wtHolder">
For now, I will work on the form functionnality for user need and I came back soon on the layout enhancement issue.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 18 guests