Sheet height property for responsive

Community Driven Extensions Project
Post Reply
bug007
Posts: 39
Joined: 07 Oct 2015, 12:08

23 Jul 2018, 10:48

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.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

23 Jul 2018, 13:36

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!
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

bug007
Posts: 39
Joined: 07 Oct 2015, 12:08

23 Jul 2018, 16:24

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 ?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

23 Jul 2018, 16:28

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%.
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

bug007
Posts: 39
Joined: 07 Oct 2015, 12:08

23 Jul 2018, 16:59

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 !

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

23 Jul 2018, 17:33

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


Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

23 Jul 2018, 19:09

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

bug007
Posts: 39
Joined: 07 Oct 2015, 12:08

24 Jul 2018, 09:40

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

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;">
and the children who content the data layout inherit also the initial height

Code: Select all

<div style="position: relative; width: 1573.33px; height: 0px;" class="wtHolder">
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.

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests