afbora / Kirby-Tabs-Field

The tab field type is designed specifically for use within the fields.
77 stars 11 forks source link

Problem related to inactive tabs being invisible, but still there #15

Open rasteiner opened 7 years ago

rasteiner commented 7 years ago

I've encountered an issue while using this plugin together the "visual markdown" plugin and a structure field.

I mention the author here, hoping he sees this issue: @JonasDoebertin

The problem was introduced here: https://github.com/afbora/Kirby-Tabs-Field/commit/0271092787706d156244e2c0a13df0550248fef6

The above commit changed the CSS by putting the inactive tabs on top of the active one (or under it, doesn't seem to matter).

The result is that for some reason, the Visual Markdown field, while sitting in a hidden tab, responds to the "drop" event of the structure field when i drag and drop the structure items.

Actually you can see the same problem without the tabs plugin by dragging a structure item into a visual markdown field directly. But having the two fields sitting on top of each other, with one being invisible, aggravates the problem because it's impossible to sort the structure items.

I really don't know if it's more an issue with the tabs plugin (leaving the tabs on top of each other) or the visual markdown plugin (accepting a drop event from a structure field and then crashing).

I'm posting this here because in past versions of this plugin the issue wasn't there and I thought it might be easier to fix here.

Thank you all!

medienbaecker commented 7 years ago

I can't seem to reconstruct this issue. But can you try to set z-index: 1 and position: relative on the .tab-container and z-index: 2 on the .tab-container.active?

EDIT: I've added the suggested z-index and also pointer-events: none on the inactive tabs in a pull request. Does this solve your issue?

afbora commented 7 years ago

@rasteiner Did you test last version?

rasteiner commented 7 years ago

I will look at it the next weekend. But as far as I remember, I tried changing the z-index from the "inspector" and it didn't help.

medienbaecker commented 7 years ago

@rasteiner Did you find time to having a look at it yet?

rasteiner commented 7 years ago

It still seems buggy here. Here's a test install so you can reproduce the issue:

buggy_drag.zip

  1. go into panel (installing an account)
  2. go to the page "test"
  3. click on "tab3"
  4. Reorder the structure by dragging the first item below the second

PS: I'm using Chrome and Firefox on stable channel.

medienbaecker commented 7 years ago

I'm not sure if we can even fix this on the Tabs Field, it may be an issue with the markdown field itself. If you remove the tabs from your blueprint it's still buggy. Once I drag a structure entry it gets invisible and messes up the position of the other entries. When I drag it over the markdown field it's the same issue you reported.

drag

I'm afraid this will not be fixed though. There are a lot of open issues and no commit since months. That's sad, I used it in almost every project before that.

medienbaecker commented 7 years ago

I think I have found a solution and added a pull request: https://github.com/afbora/Kirby-Tabs-Field/pull/19 By moving the inactive tabs outside of the viewport with transform: translateX(-9999px) the Visual Markdown Editor won't prevent the dragging of structure entries.

daybugging commented 6 years ago

Coming here after quite a while, is this fixed? If so, please close the issue in order to avoid further confusion :confused: