Skip to content

fix: increase z-index so toolboxes render above adjacent blocks#187

Open
MD-Mushfiqur123 wants to merge 1 commit into
editor-js:masterfrom
MD-Mushfiqur123:fix/z-index-overflow
Open

fix: increase z-index so toolboxes render above adjacent blocks#187
MD-Mushfiqur123 wants to merge 1 commit into
editor-js:masterfrom
MD-Mushfiqur123:fix/z-index-overflow

Conversation

@MD-Mushfiqur123
Copy link
Copy Markdown

Description

The .tc-wrap\ had \z-index: 0\ which created a stacking context that trapped toolbox popovers behind adjacent Editor.js blocks. This PR increases:

  • .tc-wrap\ z-index from 0 to 10
  • .tc-toolbox\ z-index from 1 to 15

This ensures row/column deletion popovers always appear in front of other content.

Related Issue

Fixes #186

Screenshots

N/A - visual fix for popover z-index overflow

The .tc-wrap had z-index: 0 which created a stacking context that
trapped toolbox popovers behind adjacent Editor.js blocks. Increased
.tc-wrap z-index to 10 and .tc-toolbox z-index to 15 so the row/column
deletion popovers always appear in front of other content.

Fixes editor-js#186
Comment thread src/styles/table.pcss
@@ -19,7 +19,8 @@
display: grid;
grid-template-columns: calc(100% - var(--cell-size)) var(--cell-size);
/* Bug-fix: https://github.com/editor-js/table/issues/175 */
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like this can lead to the old bug
#175

Comment thread src/styles/toolboxes.pcss
position: absolute;
cursor: pointer;
z-index: 1;
z-index: 15;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where 15 came from?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug z-index overflow

2 participants