Posted in: SPARK UI Toolkit Controls
Jan AnderssonFebruary 11, 2017 at 5:59 am #3673
I have a coach that is supposed to be viewed on a mobile phone. It uses the Responsive Sensor on top level and within that a Vertical Layout. It looks pretty good except for one thing: I have not been able to set the coach to cover 100 % of the available screen height. I have tried with various settings of the Vertical Layout to no avail. From what understand, the problem might be related to that setting a container to e.g. 100 % just sets it to cover 100 % of the enclosing container, which ultimately is the entire web page being displayed. So I would need to set the entire page to 100 % of the available screen size. I don’t know how to do that.
Regards, JanAndrzej MichalecFebruary 13, 2017 at 3:16 am #3678
Sounds like I am not the only one struggling with 100% height… a week ago I have asked the same question “how to stretch widget height to 100%” that remains unanswered to date.
-andy.Jan AnderssonFebruary 13, 2017 at 4:58 am #3679
From your findings it sounds like my suspicion was right – but that it’s even more complicated than I though. I really hope someone comes up with a solution – with mobile phones, it’s important that the coach is correctly sized to its display.
Rgds, JanJan AnderssonFebruary 14, 2017 at 12:14 pm #3706
A colleague of mine found the vh css unit, standing for Viewport Height. E.g. 95vh means 95 % of the available viewport. It can be used with the Height config option of a Vertical Layout (and most likely with all height related css constructs).
Regards, JanSPARK SupportFebruary 17, 2017 at 2:20 pm #3758
Can you attach a small sample TWX containing an example of the issue?
Stephen P.Jan AnderssonFebruary 17, 2017 at 2:39 pm #3760
Well, the solution is in my posting #3706. Use the unit vh to set the height to a percentage of the available viewport. So no need for further investigation. Thanks anyway. Rgds, JanSPARK SupportFebruary 17, 2017 at 3:20 pm #3767
Thank you for the feedback.
You must be logged in to reply to this topic.