How to stretch widget height to 100%

Andrzej Michalec

February 6, 2017 at 8:30 am #3633

Hi,

I am looking for SPARK team advice on setting layout so that one of widgets stretches and fills remaining part of viewport height. In short I would say “how to effectively set up ‘height: 100%’ ” on last coach view. Using this CSS property straight ahead does not work with “appearance” settings, nor with legacy “positioning” properties (height and min-height), and in fact it never worked with widgets from IBM Coaches toolkit. Quick inspections shows that outer html and body have set “height:100%” (plus zeroed margins/padding) but inner iframe that has another html and body tag – does not. Also divs coming from widgets structure does not specify height. This way chain of parents does not make space for child marked “height: 100%” to make expansion happen. Since from coach level perspective we do not control HTML structure, it is also hard to apply any other technique using display:table/display:table-cell styles, or flexbox. Any ideas?

regards,
-andy.

SPARK Support

February 16, 2017 at 3:02 pm #3733

Hi Andy,

What SPARK control are you working with?

Please provide a screen shot of your configuration.

Regards,

Stephen P.

Andrzej Michalec

February 20, 2017 at 8:40 am #3776

Hi Stephen,

Simplest layout has two top-level coachviews, top one being Vertical Layout marked (1) on attached screenshot, and the other custom CV marked (2). Layout (1) has some single selections, all these elements (layout and droplists) with default sizes (unspecified). Custom CV (2) should take remaining space also when window is resized. Right now (2) is just a “div” that has canvas injected in runtime by some JS lib (it has graph structures displayed), but this is irrelevant to problem and should work with any CV placed as (2). I expect that whether it is custom CV or SPARK control, we should be able to specify either “appearance” configuration, positioning, or simple CSS to achieve necessary effect of taking the rest height.

regards,
-andy.

SPARK Support

February 22, 2017 at 10:48 am #3799

Hi Andy,

Is this issue happening with a particular browser?

Please see the attached screenshot.  In this scenario, I have placed two Vertical Layout controls on the Coach View.  The first Vertical Layout has no height set and contains three (3) Single Select controls.  The second Vertical Layout has the height set to 100%.  In each browser that I have inspected, the second Vertical Layout takes up the remaining space.

Regards,

Stephen P.