Absolute positioned areas not editable

[morgandonze]

One way to address this would be providing another way to select a content area to edit. For instance, "previous/next" buttons.

In this example, the photograph and other elements are not selectable.

[jamonholmgren]

I would prefer to find a way to escalate Thesis editor to the front z-index and fix this problem that way. I think @yulolimum might put the thesis_editor(@conn) in the footer, which helps?

[yulolimum]

@mlaco @jamonholmgren since thesis uses absolutely positioned areas while in edit mode, whatever z-indexes your relative containers have conflict with the z-indexes that thesis adds. Until we find a way to be able to interact with editable areas that doesn't involve inline editing, you will have to use workarounds. For example, Concrete5 doesn't actually use editable divs - it uses additional elements overlaid on top of the fader using JS. This is much more complex than what Thesis was meant to accomplish.

As a workaround, you will have to add additional styles in your code.

Since I know exactly what you are working on right now, I can address your case specifically. Please locate the _thesis-overrides.sass partial in the chainreact folder and see what I am doing there to achieve edibility even with absolute elements.

For other people following this issue, the gist of the fix is this: you have to target your absolutely positioned elements while thesis is in "edit mode". For that, we have a class that gets added to the body - .thesis-editing.

So, if your styles for your absolutely positioned elements are:

.div
  position: absolute
  z-index: 1

You need to make it appear on top of the dark overlay that appears in edit mode (which is z-index 1039):

body.thesis-editing
  .div
    position: absolute
    z-index: 1040

As a side-note, this is something on my list to document. I will also be creating a series of how-to videos that will go over this. As for a potential fix, well there isn't one at this time. We would have to rebuild the way thesis works significantly or use JS to add higher z-indexes to absolutely positioned elements which could potentially break your layout. The benefit of Thesis is that everything is inline and you can easily override to make it work for you.

I vote this issue closed since this is intended behavior.

[jamonholmgren]

I will also be creating a series of how-to videos that will go over this.

Nice!