Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add bottom margin to body element when inspector is collapsed #126

Closed
dawidurbanski opened this issue Sep 21, 2021 · 3 comments · Fixed by #127
Closed

Add bottom margin to body element when inspector is collapsed #126

dawidurbanski opened this issue Sep 21, 2021 · 3 comments · Fixed by #127
Assignees
@przemyslaw-zan
Labels
intro squad:platform Issue to be handled by the Platform team. type:improvement
Milestone
iteration 48

Comments

@dawidurbanski
Copy link
Contributor

Currently the margin-bottom on the body element is added when inspector is expanded:

html body.ck-inspector-body-expanded {
    margin-bottom: var(--ck-inspector-height);
}

This makes all the content to be nicely pushed up when inspector is expanded

Screenshot 2021-09-21 at 11 37 32

Unfortunately there is no such behaviour in case of inspector collapsed causing contents of the page to overlap with it.

Screenshot 2021-09-21 at 11 37 46

It would be great if we could add --ck-inspector-collapsed-height custom property and use it accordingly:

html body.ck-inspector-body-collapsed {
    margin-bottom: var(--ck-inspector-collapsed-height);
}
@pomek pomek added squad:platform Issue to be handled by the Platform team. type:improvement labels Sep 21, 2021
@dawidurbanski dawidurbanski changed the title Add body bottom margin when inspector is collapsed Add bottom margin to body element when inspector is collapsed Sep 21, 2021
@pomek pomek added the intro label Sep 27, 2021
@pomek
Copy link
Member

pomek commented Sep 27, 2021

Scope:

  • Create a new CSS variable: --ck-inspector-collapsed-height
  • Use the variable in CSS
  • Add the proposed html body... definition.

@pomek pomek added this to the iteration 48 milestone Sep 27, 2021
@pomek
Copy link
Member

pomek commented Sep 28, 2021

Consider adding the code to manual test server instead of modifying the inspector code.

@pomek
Copy link
Member

pomek commented Oct 7, 2021

Step list:

Inspector

  • Add the --ck-inspector-collapsed-height variable to body[style]. Similiar to <body style="--ck-inspector-height:...;">
  • If inspector is collapsed, determine its height based on that variable.

Manual test server

  • Use the variable to add the margin-bottom definition as Dawid proposed in the ticket in the first post.

@przemyslaw-zan przemyslaw-zan self-assigned this Oct 7, 2021
@przemyslaw-zan przemyslaw-zan mentioned this issue Oct 8, 2021
Merged
pomek added a commit that referenced this issue Oct 15, 2021
@pomek
Merge pull request #127 from ckeditor/i/126
0324c24 
Other: Added bottom margin to the `<body>` element when the inspector is collapsed to avoid covering the footer. Closes #126.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@przemyslaw-zan przemyslaw-zan

Labels
intro squad:platform Issue to be handled by the Platform team. type:improvement
Projects
None yet
Milestone
iteration 48
Development

Successfully merging a pull request may close this issue.

Added bottom margin to body element when inspector is collapsed. ckeditor/ckeditor5-inspector
3 participants
@pomek @dawidurbanski @przemyslaw-zan