Hiding a component removes it, causing other components to shift

Qodly Qodly Script
1

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.

2

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

3

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
4

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.

5

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

1 Like
6

did anything else come of this?

7

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.

8

@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:

webForm["element_ref"].addCSSClass("masked")

In order to hide your element. Or:

webForm["element_ref"].removeCSSClass("masked")

To display it.

1 Like
9

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.

10

We will soon have more comfortable options around this topic.

11

anything new on this?
kluging the css makes elements of the form flash when the form loads, which is not ideal.

12

Hi mikey,

Qodly 1.0.0 beta 5, in final validation stage, comes with better options for hiding/removing components and control the resulting layout.
It should ease your work. I propose you to check this out after its release.

Mathieu

1 Like
13

alpha channel access request…