Auto-sizing of widget height (based on rows)

Apliqo UX
1

I remember there was a value for the widget “height” parameter we could set that makes it dynamic (based on the number of rows in the table). Does anyone remember what this value is? I tried “auto” which didn’t work…

image

2

Enable no card option with height set to auto

3

@ishapiro much thanks for reminding me on the noCard part!

4

@ishapiro @wwang
can you please share the syntax for this?

tried this but did not work

"cardConfig":     {    
"noCard": {"height": "auto"}
}
5

noCard is a separate parameter

“noCard”: true

6

It appears the auto-height is working in a different manner than what I was initially looking for. If I only have one widget on each row (non-flexible layout), auto-height stretches the widget height to fit the entire screen.

image
image2496×1129 149 KB

However, what I really want is the widget to resize height based on the number of rows. For example, I want to stack the two grids so that the heights automatically scale so there is no gap between the two widgets. There are situations where the rows may be driven dynamically using the global filters so I want the widget height to expand/compress according. Is there a way to do this?

image
image674×941 64.9 KB

7

Add the following to the htmlSnippet inside Dashboard

.wtHolder { overflow: auto; height: auto !important; min-height:100%; max-height:500px; } .handsontable-container { width: 100%; height: auto !important; max-height: 500px; overflow: hidden; }

Widget Advanced Options json
{
“cardConfig”: {
“height”: “auto”,
“noCard”: true,
“showTopBorder”: false,
“shouldShowTitlesSeparator”: false
}
}

Screen Shot 2021-11-04 at 9.01.02 pm
Screen Shot 2021-11-04 at 9.01.02 pm966×662 69.9 KB

Screen Shot 2021-11-04 at 9.00.55 pm
Screen Shot 2021-11-04 at 9.00.55 pm1078×555 64.1 KB

Screen Shot 2021-11-04 at 9.02.53 pm

8

@ishapiro , great that worked for me! I didn’t exactly follow your “htmlSnippet” comment as I couldn’t get UX to pick up the CSS when I created it in the snippet editor, even after I tried referencing the snippet w/ the “htmlSnippet” parameter in Adv Options.

Instead I copied the CSS definitions for “wtHolder” and “handsontable-container” into “custom-style.css” which also worked.

1 Like
9

After some more testing, I noticed that applying the “wtHolder” and “handsontable-container” CSS definitions on a global level in “custom-style.css” has unintended impact (creating extra scrollbars) on other screens where “auto” height is not used.

I found a workaround (inspired by the new Apliqo_Demo landing pages) to only have the CSS be used in the context of this particular screen (perhaps this is what @ishapiro was suggesting by “add the following to the htmlSnippet inside Dashboard”). I created a separate “dummy” widget (HTML type) to only store the two CSS classes. I was able to essentially conceal this widget (outside of edit mode) by putting it at the bottom of the dashboard and using the Adv Options below:

{
  "cardConfig": {
    "noCard": true,
    "height": "auto",
    "showTopBorder": false,
    "shouldShowTitlesSeparator": false
  },
  "htmlSnippet": "dashboard/widget-wrap.html"
}

It would be a handy future enhancement to have override CSS be injected into the context of the widget (perhaps with the “htmlSnippet” parameter) even if the widget is not an HTML widget.

1 Like