Column drop downs hiding behind other elements in Nintex forms

12/30/2016

Now this tripped me completely !  I have a series of metadata fields in my  SharePoint Nintex Form.

Someone had created this form earlier and I had to add one more field in between. Everything worked fine except that the suggestion dropdowns will hide behind the element below.

 

 

Try 1

In Nintex forms, there is button to bring the element to the front (see first image).  Tried setting this one by one for all the elements from top to down.

Result:  Didn’t’ work  :-(

 

Try2: 

Set Bring to Front for each alternate element ie 1 , 3, 5 and so on.

Result: worked for alternate elements but not for 2,4, and 6.  This makes sense because these were never commanded to come to front  L

 

Try 3: 

Set “Bring To Front” in the direction bottom to Top and this works!!  The suggestions are displayed for all the elements nicely.

 

Why it works

Unlike a custom html page (wherein you can set your zIndex manually ) , Nintex Forms sort of work on “first come last number” basis.  i.e   if for element A you clicked “Bring to Front” and then did the same for element B, element B will always have a higher zIndex than A.   Therefore what ever the content of element A, it will always be hidden behind B.

This can be seen in the Html below.  Notice the zIndex of  element A in first pic and then of element B( second pic).  Therfore if you start setting the “Bring To Front” from bottom to top, the element beneath will always have a lower zIndex than the one above it and hence it works!

 

 

 

 

 

PS: Though its Metadata columns in this case, but it should be the case for all other element types too.

Name

Email

WebSite