Custom Drop-down Widget: Minimum Height Issue

Developers
1

Hello Grist community,

I’ve created a custom drop-down widget for Grist (grist-widget/drop-down at master · Antol/grist-widget · GitHub ) , but I’m encountering an issue with its minimum height. Despite attempts to minimize padding and margins, the widget refuses to be less than approximately 120 pixels tall.

Here’s what I’ve tried:

  1. Setting margin and padding to 0 for body and html.
  2. Using flexbox for layout.
  3. Setting overflow to hidden.
  4. Minimizing padding and font sizes for all elements.

My widget consists of a simple dropdown and an error message div. I’m aiming for it to be as compact as possible, ideally just the height of the dropdown itself.

Has anyone encountered similar issues with custom widgets? Are there any known limitations or workarounds for controlling the minimum height of custom widgets in Grist?

Any insights or suggestions would be greatly appreciated. Thank you!

2

+1
I have been meaning to post about this EXACT same issue I’ve run into with a custom widget that I’m developing. I have figured out how to reduce the height, but it’s kind of a two-part solution, at least if you are loading the widget from a host that is different from where you’re loading Grist (due to cross-origin browser policies).

I found I can adjust the height of the widget container by doing the following (in case you ARE loading Grist + widget from the same domain):

  1. Find the DIV that contains the IFRAME of the widget; set the CSS height and min-height to your desired height in pixels. You may need the !important on there as well.
  2. Set the height of the body tag within your Widget as well – i.e,. within the ‘document’ that is within the iframe tag that is created when you add a custom widget. If the Grist page and the Widget are on the same domain, you can do all of this dynamically from within your widget. Otherwise, you have to do the part outside of the iframe from a custom.css in Grist, and the “inside” part you can do from your widget, which is super hacky.

IMO, the right long-term solution here is to set a smaller default value for widgets – or AT LEAST for custom widgets.

In my case, I’m working on a simple widget to show content (Markdown or HTML) which can be easily edited inline, and I also want to be able to have a ‘thin’ widget - e.g., a heading, which is not currently possible.

3

There was an issue with the sizing of custom widgets, which was fixed in (core) Fix CustomView taking up more height than page layout gives it. · gristlabs/grist-core@fbc0418 · GitHub. This fix is on SaaS, but it just missed the release of grist-core, so will be in the next one. I am not sure if it’s the same problem though.

1 Like
4

I switched to the latest tag with these changes and it helped. Thank you!