Hiding a component removes it, causing other components to shift

using .hide() to hide a component also causes it to be removed from the form, and other components to shift. similarly, using .show() to show an object shifts other components.

i suppose a workaround for this would be to put the components in a stylebox.

Hello Mikey,
The .hide() method doesn’t actually remove the component; instead, it applies a “display: none” style to it. If you want to maintain its size without displaying it, you can create a css class with “visibility: hidden;” This will hide the component without affecting the layout of other components. You can apply this class using .addCSSClass() and remove it using .removeCSSClass() .

1 Like

then, maybe we should either have a separate command for components, called .hyde(), or .sonOfHide() for this specific purpose, or add a * parameter to .hide() for this very thing.

Hi Mikey, we’re preparing something much better (at least in theory!). You’ll see.

1 Like

did anything else come of this?

You’ll have to wait till Qodly 1.0.0 beta 3 is released. Anyway my best bet to avoid component shift when hiding something would be to either place the hidden component in a stylebox, to control its dimensions, or to play with transparency instead of hiding it.

@Cyril.limpalaer is right! hide/show methods sets the display CSS property.

As suggested by @Cyril.limpalaer, the best option for now is to add/remove a CSS class setting visibility to hidden.

You can add these CSS classes for example:

/* "masked" CSS class */
self {
  visibility: hidden;

The in your QodlyScript code you can apply, you can call the code:


In order to hide your element. Or:


To display it.

1 Like

it’s nice to see that i’m not the only one futzing with q on a weekend…
see the other thread, too. unfortunately, there isn’t a good way to mark forum threads as connected.
i’m using the suggested css, which brings its own issues:
a) either have it hidden, by default, which means it is also hidden in the designer, while i am editing the form or
b) hide when the form loads, which causes the components that are being hidden to flash from visible to invisible.
anyway, since i bumped into this, again, today, i was just checking to see if there was an update on it.

We will soon have more comfortable options around this topic.