Nintex Forms: Overlapping Controls/Panels


Userlevel 4
Badge +10

Hi Folks,

I have a panel that is conditionally visible. It has nothing behind it in the design window but when it is visible at run-time, the buttons in the panel show up on top of some other controls (see below). Does anyone know what would cause this behavior?

In the designer...

193665_pastedImage_1.png

Rendered at run-time...

193666_pastedImage_2.png

Thanks for any advice that you can give,

Patrick Kelligan


12 replies

Userlevel 5
Badge +14

do you have controls above panel with save/cancel buttons placed within (separate) panel as well?

make sure no controls on the form overlaps, especially one that are shown/hidden with rules

Userlevel 4
Badge +10

Hi Marian,

Thanks for your reply!

I have no controls above the panel. All are inside the panels None of the panels are nested or overlapping. The panel below with Workflow State and State ID is in a separate panel and not overlapping. I did some testing and came up with some peculiar results... If I move the panel with the workflow state in it down precisely 1280 pixels (or greater) from the Save/Cancel panel, the form render exactly as it should. Once I enter the < 1280 pixel range the buttons render over the comments box. Any thoughts?

193729_pastedImage_1.png

Userlevel 5
Badge +14

I have no controls above the panel

I meant hose in dark grey area, or even not shown on your screenshot...

how do you control visibility for both panel with buttons and panel with staus, by rule, control settings or javascript?

could you try to set some bg color to panel with buttons and check whether whole panel renders incorrectly or just single buttons?

Userlevel 4
Badge +10

Sorry Marian, I understand now. Thanks for the clarification and your great responses.

do you have controls above panel with save/cancel buttons placed within (separate) panel as well?

Yes, those dark grey controls are in their own panel and are not overlapping any of the other controls/panels.

how do you control visibility for both panel with buttons and panel with staus, by rule, control settings or javascript?

All hidden panels are controlled with formatting rules.

could you try to set some bg color to panel with buttons and check whether whole panel renders incorrectly or just single buttons?

Great idea! Yes, it looks like the panel is rendering incorrectly as well.

193787_pastedImage_5.png

Thanks and Regards,

Patrick

Userlevel 5
Badge +14

hm, that's strange. panels usually do not render one over the other.

could you describe what's being done in the above dark grey area?

are there any panels/controls that show/hide dynamically as well? so can height of dark grey area grow/shrink?

how do you have set resize in runtime for dark grey panel, panel with buttons, and status panel?

if you switch off/remove rule for status panel, how does it look like?

you mentioned you found some limit of 1280px when it starts working correctly.

is it measured absolutely from the top of the form ore relatively from the bottom of button's panel (or dark grey panel)?

if  you switch off all the formatting rules so that all the controls are shown, how does the form renders like? is there still some gap between button's panel and status panel or in that case you get panels rendered one right after the other?

and just to be sure, could you check developer console for any errors reported? those may cause some rule(s) fail or are not applied at all.

Userlevel 4
Badge +10

Hi Marian,

Below, I have an explanation of the panels above the problem panel. These progressively get exposed by the workflow changing the state ID.

193802_pastedImage_2.png

...can height of dark grey area grow/shrink?

No.

how do you have set resize in runtime for dark grey panel, panel with buttons, and status panel?

All panels are set to "Yes".

if you switch off/remove rule for status panel, how does it look like?

When the rule is removed from the status panel, everything looks correct...

193803_pastedImage_9.png

...is it measured absolutely from the top of the form ore relatively from the bottom of button's panel (or dark grey panel)?

It is a measure between the status panel and the Save/Cancel (pink) panel.

could you check developer console for any errors reported? those may cause some rule(s) fail or are not applied at all.

How do I do that?

-------------------

Thanks!

Patrick

Userlevel 4
Badge +10

Marian,

...Also, when I reverse the order of the panels, it renders OK but...

193804_pastedImage_1.png

...there is a little excess space between the panels that should not be there (see screenshot).

193805_pastedImage_2.png

Userlevel 5
Badge +14

to check for errors in developer console - press magic F12 key in the browser and switch to the console tab.

reg. the screenshots, I'm litlle bit lost.

on the screenshot with overlapped panels, the panel being overlapped contains 'request date', 'comments' and 'active' controls.

however, none of the 3 panels for 3 stages resemble on that panel being overlapped .

so is there still anything else on the form?

Userlevel 4
Badge +10

Sorry Marian, the original panel overlapped by the controls is the main info page. Seen in the screenshot below, the controls are behaving properly because I changed the order of the panels. While changing the order of the panes seems an acceptable workaround, I would still like to understand why the issue arose, both for my own edification as well as for the sake of any other community member that may run into a similar issue.

193887_pastedImage_1.png

Thanks,

Patrick

Userlevel 4
Badge +10

Also Marian... here is the result of the dev console:

193888_pastedImage_1.png

...if I open the Debugger tab from the second line of the console tab, here is the result:

193889_pastedImage_2.png

Hope this helps,

Patrick

Userlevel 5
Badge +14

hard to say definitely, what might cause it, but apparently something is breaking coordinates calculation.

what I would maybe tried further is that I would make small gap between 'workflow state' and 'state id' rows in status panel. should they look visually just touched and not overlapped, internally they may save coordinates overlaped by 1-2px.

Userlevel 5
Badge +14

once there is a error reported, execution of js code might be unpredictable (from my experience), especially in IE. so that might be possible source of problems.

try to search net for that error message, there're plenty of possible reasons for that. hopefully you will find one that applies to you.

Reply