Search code examples
htmlcssvue.jsckeditorckeditor5

Unable to get Toolbar fixed at the top of the rich text area with content/body scrollable

The intent is to have the ckEditor toolbar fixed at the top while being able to scroll through the content. Currently, toolbar gets scrolled off the screen as shown in the GIF image below.This component is on a page that is scrollable. So the position:fixed; does not work as I tried that. enter image description here

The label Question Stem stays at the top and is wrapped by Vuetify Toolbar component.

the ck-toolbar class on the toolbar items has the following CSS

.ck.ck-toolbar {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

I have added the following CSS to make the content scrolable.

#ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
   position: relative !important;
   z-index: 10;
}
#ckEditorQuestionStem .ck.ck-editor__main {
  max-height: 400px;
  overflow-y: auto;
  position: relative !important;
}

The HTML for this is shown in the screenshot below enter image description here

I tried the method posted here. Also tried adding viewportTopOffset: 50, under toolbar of the editor config. No luck so far.

Solution

  • I reolved this by applying the following style on the parent element of ckEditor

    style="contain: content;"

    And keeping the toolbar position as fixed.

    #ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
  position: fixed !important;
  margin-right: 5px;
  margin-left: -6px;
  min-height: 100px;
  top: 0px;
  z-index: 2;
}

    Posting the answer in case someone finds it helpful. Here is the current editor window with scrollable body and fixed toolbar. This is more desirable than a sticky toolbar.

    Updated component

    This was helpful in arriving at the solution.