U4-7806 - Possible to interact with property editor "preview" in document type editor

Created by Bjarne Fyrstenborg 21 Jan 2016, 14:54:21 Updated by Bjarne Fyrstenborg 31 Jan 2016, 20:39:17

Tested with Umbraco 7.4.0-beta2

I just tested how it works with my Color Palettes in the new document type editor. https://our.umbraco.org/projects/backoffice-extensions/color-palettes/

The document type editor use a transparent overlay, which has a z-index value on 10. But because I in my property editor has the div with class "frame" with position:relative; it is on top of this overlay and I can therefore check the palettes (radio buttons).

It seems to fix the issue if I change the overlay z-index from 10 to 110 or higher.

Would it be an issue to increase the z-index?

4 Attachments


Bjarne Fyrstenborg 27 Jan 2016, 20:14:33

PR: https://github.com/umbraco/Umbraco-CMS/pull/1067

Mads Rasmussen 28 Jan 2016, 13:34:44

Hi Bjarne,

I am not totally satisfied with the solution in your PR because it doesn’t really fix the issue but only fixes it for all property editors using z-index under 115. And if we have to raise the value every time someone uses a higher z-index we will be in trouble :)

I have made a solution where we set a preview state on the property editor (we will be able to use this for disable validation and disable tabbing in the future) and then sets pointer-events to none for the entire property editor. It seems to work fine and it should work for all property editors.

Please give it a spin and let me know if you have any issues. Keep up the good work!

Mads Rasmussen 28 Jan 2016, 13:35:03

PR: https://github.com/umbraco/Umbraco-CMS/pull/1073

Bjarne Fyrstenborg 28 Jan 2016, 13:49:03

Hi Mads

Yes, with the existing styles it would give some issues of property editors use high z-indexe - for my property editor it hasn't set a z-index, but the palette has a frame/container with position:relative which causes the issue - but necessary in my property editor.

How does your changes affect the "checkered-background" to cover the property editor? :) Can I test with this build? https://ci.appveyor.com/project/Umbraco/umbraco-cms-hs8dx/branch/7.4.0/artifacts

Bjarne Fyrstenborg 28 Jan 2016, 14:01:03

ahh, it seems 2730 is with latest changes, but the last build is this one? https://ci.appveyor.com/project/Umbraco/umbraco-cms-hs8dx/branch/7.4.0/artifacts (2501)

Mads Rasmussen 28 Jan 2016, 20:42:35

@Bjarne.Fyrstenborg I have tested your package and it works. The PR has been pulled in today so you should be able to test it in the nightly from today or you can test it in this build: https://ci.appveyor.com/project/Umbraco/umbraco-cms-hs8dx/build/2726/artifacts

I have changed the "checkered-background" to be behind the property editor, so the pattern is now a background instead of an overlay.

Bjarne Fyrstenborg 28 Jan 2016, 21:06:23

@madsrasmussen okay, will check it out :) however the last couple of days with the latest changes the installation seem to fail, when running via WebMatrix, "quick" install with SQL CE. Also with the above build you linked to.

The Log doesn't give me much info except:

_shutDownMessage=CONFIG change
HostingEnvironment initiated shutdown
CONFIG change
CONFIG change
CONFIG change
CONFIG change
HostingEnvironment forårsagede nedlukning

_shutDownStack=   ved System.Environment.GetStackTrace(Exception e, Boolean needFileInfo)
   ved System.Environment.get_StackTrace()
   ved System.Web.Hosting.HostingEnvironment.InitiateShutdownInternal()
   ved System.Web.Hosting.HostingEnvironment.InitiateShutdownWithoutDemand()
   ved System.Web.HttpRuntime.ShutdownAppDomain(String stackTrace)
   ved System.Web.Configuration.HttpConfigurationSystem.OnConfigurationChanged(Object sender, InternalConfigEventArgs e)
   ved System.Configuration.Internal.InternalConfigRoot.OnConfigChanged(InternalConfigEventArgs e)
   ved System.Configuration.BaseConfigurationRecord.OnStreamChanged(String streamname)
   ved System.Web.Configuration.WebConfigurationHostFileChange.OnFileChanged(Object sender, FileChangeEvent e)
   ved System.Web.DirectoryMonitor.FireNotifications()
   ved System.Web.Util.WorkItem.CallCallbackWithAssert(WorkItemCallback callback)
   ved System.Web.Util.WorkItem.OnQueueUserWorkItemCompletion(Object state)
   ved System.Threading.QueueUserWorkItemCallback.WaitCallback_Context(Object state)
   ved System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   ved System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   ved System.Threading.QueueUserWorkItemCallback.System.Threading.IThreadPoolWorkItem.ExecuteWorkItem()
   ved System.Threading.ThreadPoolWorkQueue.Dispatch()
   ved System.Threading._ThreadPoolWaitCallback.PerformWaitCallback()

Bjarne Fyrstenborg 31 Jan 2016, 20:39:17

@madsrasmussen I tested your changes and it works great :) however I think the "preview" of the datatypes should look disabled/dimmed - at the moment users (at least people who are new users of Umbraco) might think they should enter something in the textboxes, select a file, select an option etc.

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.4.0

Due in version: 7.4.0

Sprint: Sprint 7

Story Points: