Nintex Forms - 2.9.4.0 Upgrade Issues

Hi Anthony,

I'm facing the same problem that the suggestionlayer of the people picker field is getting overlapped by other people picker fields below since Forms version 2.9.4.0. This doesn't occur to other field-types like single line of text but people fields:

Bring the people picker-field to the front doesn't work if there are multiple user-fields which needs all to be in front.

Do you know a workaround by CSS or some other way?

Greetings from Nuremberg

Ricky

Nice Work!

Not sure about panels, but I think they might work the same as repeating sections.  I was able to use developer tools in the browser to find out that the repeating section has a z-index set to 506, and that any custom CSS setting a z-index on an element inside a repeating section is cancelled for some reason unless it is marked as !important.

Update from support re people picker overlap...

I've had an update from my development team, the below issue should be resolved in the next release of Nintex Forms due on the 8th of March, pending that there are no issues found during testing.

I have had a similar problem when working with a drop down menu created by jquery UI's Autocomplete widget. 

I first created this css rule to pull the element forward

.bring-to-front {
  z-index: 501 !important;
}
‍‍‍

And then added two events using javascript that would add the class to the control if it had focus, and remove it if focus was lost. 

We can simply target your People Picker controls using their 'data-formcontroltypeid' attribute as follows: 

NWF.FormFiller.Events.RegisterAfterReady(function() {

  NWF$("[data-formcontroltypeid='c0a89c70-0781-4bd4-8623-f73675005e12']:visible").on("focusin", function(event) {
    NWF$(event.delegateTarget).addClass("bring-to-front");
  });

  NWF$("[data-formcontroltypeid='c0a89c70-0781-4bd4-8623-f73675005e12']:visible").on("focusout", function(event) {
    NWF$(event.delegateTarget).removeClass("bring-to-front");
  });

});
‍‍‍‍‍‍‍‍‍‍‍

This way, no matter how many People Picker controls you add / remove, they will work as expected without any additional work. Just drag and drop em! 

One caveat is that this will only apply the events on People Picker Controls that are visible (see ":visible"). If this is problematic (due to a control being hidden) you could probably just remove that ":hidden" selector from the query and the event will be applied to all People Picker controls regardless of their visibility. 

Additionally you can learn about the data-formcontroltypeids using this link. 

Thank you very much ... going to bookmark this thread so I can find this in the future...!

Even more yessssss! I'm probably going to start putting together the catalogue this weekend as well. High-five & thanks in advance!

The reason that panels end up cutting off content that falls beyond their borders is that the overflow (x & y) are both set to 'hidden' by default. 

If you had a people picker control (or any control that had a drop down menu) which featured many options that fell below that border, they would simply be cut-off and not rendered. 

Because the Panel Control's top level parent <div> container has its overflow value set to visible, all we need to do is inherit those values at the <fieldset> element level (which is our Panel proper). 

Doing so will allow content that falls outside of the content box of the fieldset element to be rendered as opposed to being cut off. 

This css shouldn't affect anything but the panel (<fieldset> element). 

I have 1.12.2.30 installed and this is still an issue.