StickyPanel behaves weird inside overflowed element

[oskarwrobel]

StickyPanel should listen to scroll event of all of its ancestors not only on the window object.
The same as BalloonPanelView does: https://github.com/ckeditor/ckeditor5-ui/blob/beb9f96615da05f22166fb8ddfa7838333b1b61f/src/panel/balloon/balloonpanelview.js#L326-L340 (we can consider moving this listener from BPV to some util).

Besides panel should take only the visible part of the limiter rect into consideration.

Now when classic editor is inside overflowed container then sticky top bar behaves weird.

[ma2ciek]

Duplicate in the SO question: https://stackoverflow.com/questions/52512665/how-to-disable-sticky-toolbar-in-classic-editor-when-page-is-scrolled.

[gauravjain028]

@oleq Is it possible to fix by overriding something in my build ?

[petrvorobev]

confirmed

[akhilxavierm]

This CSS would fix the issue
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky{ position: static !important; }

[flyher]

This CSS would fix the issue
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky{ position: static !important; }

Thanks @akhilxavierm , this works well.
Maybe we can add the following css to solved the issue temporary.

// default global
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky {
    position: static !important;
}

// blur
.ck-editor__top {
      height: 1px;
      overflow: hidden;
}

// focus
.ck-editor__top {
      display: block;
      height: 38.67px;
      .ck-sticky-panel__placeholder {
        display: none !important;
      }
}

[robclancy]

We come up with issues, not sure if related to this or the many other issues I have read, where it just doesn't work properly if you don't use the overflow on the body element.

But just using CSS sticky on the classic and document editors seems to have worked fine.

I disabled the sticky panel by doing:

editor.ui.view.stickyPanel.unbind('isActive');
editor.ui.view.stickyPanel.isActive = false;

And added the following CSS (tailwind but self explanatory):

.ck-editor__top {
  @apply sticky top-0 z-10 !important;
}

.ck-sticky-panel__content {
  @apply static !important;
}

[michalbilik]

This issue is still reproducible on the master branch.

Steps:
1. In the all-features.html manual test, add the following style:

.container {
width: 500px;
height: 700px;
border: 1px solid #ccc;
overflow: auto;
}

2. Wrap the <div id="editor"> with a <div class="container">

3. Run the test with yarn manual --files=ckeditor5

4. Scroll inside the editor 

5. Click outside of the editor and then click back inside the editor. The toolbar will appear at the top above the buttons and won't follow the scroll.

This issue occurs in both Firefox and Safari.

Screen.Recording.2023-06-26.at.10.41.45.mov

[Dumluregn]

The initial scope is timeboxed discovery for 2 solutions:

1. Fix in sticky toolbar itself
2. Merge with the balloon system*

• If we go with this solution, once toolbar becomes sticky, the balloon will need to be repositioned after each 1px viewport change, so it may be costly. It's also debounced, so it may look weird.

Option 1 sounds like a cheaper and UX-safer one.

[oleq]

For anyone interested, the long–awaited fix for this issue will land in the upcoming release of CKEditor 5 🙂

[Mariayn]

For anyone interested, the long–awaited fix for this issue will land in the upcoming release of CKEditor 5 🙂

Hi!!! Oleq could you tell me please where can i find the solucion please?if has been realeased of course

[Witoso]

Released in v39.0.0.

[Mariayn]

Released in v39.0.0.

Thanks Witoso! but ArticlePluginSet is not officially available in the standard CKEditor5 packages as part of production modules, so why did you specify that? i paste the code here in case someone can help me please

view form:

<?php
include_once(THEME_DIR.'backing/header.php');
?>
<script src="<?php echo THEME_URL.'assets/custom/libs/ckeditor5/build/ckeditor.js'; ?>"></script>
<form class="jqvalidation" method="POST" enctype="multipart/form-data">
	<div class="card">
		<div class="card-body">
			<div class="mb-3 row form-group required">
				<label class="col-md-2 col-form-label">Título</label>
				<div class="col-md-10">
					<input required type="text" class="form-control" placeholder="Título" name="Titulo" value="<?php echo input($d['Titulo']); ?>">
				</div>
			</div>
			<div class="mb-3 row form-group required">
				<label class="col-md-2 col-form-label">Texto</label>
				<div class="col-md-10">
					<textarea required name="Texto" class="ckeditor" data-placeholder="Escribe aquí"><?php echo is_ok($d['Texto']) ? html_entity_decode($d['Texto']):''; ?></textarea>
				</div>
			</div>
		</div>
	</div>
more code
</form>

app.js:

jQuery(document).ready(function($){
	$('.ckeditor').each(function(k,v){
		var id = 'ckeditor'+k;
		$(v).attr('id', id);
		var placeholder = $(v).attr('data-placeholder');
		buildCkEditor(id,placeholder);
	});
});
function buildCkEditor(id, placeholder){
	ClassicEditor
	.create( document.querySelector( '#'+id ), {
		toolbar: {
			items: [
				// 'heading',
				// '|',
				'bold',
				'italic',
				// 'fontBackgroundColor',
				// '|',
				'underline',
				'strikethrough',
				'subscript',
				'superscript',
				'|',
				'alignment',
				'|',
				'bulletedList',
				'numberedList',
				'indent',
				'outdent',
				'|',
				// 'horizontalLine',
				'link',
				'|',
				'imageUpload',
				// 'mediaEmbed',
				// 'blockQuote',
				'code',
				'codeBlock',
				'|',
				'insertTable',
				'MathType',
				'ChemType',
				'removeFormat'
			]
		},
		language: 'es',
		image: {
			toolbar: [
				'imageTextAlternative'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		licenseKey: '',
		simpleUpload: {
			uploadUrl: window.base+'do/imgUpload',
		}
	})
	.then( editor => {
		window.editor = editor;
	})
	.catch( error => {
		console.error( 'Oops, something went wrong!' );
		console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
		console.warn( 'Build id: pr65l12vdc2j-ist1qstpzq4o' );
		console.error( error );
	});
}

app.css(This is crucial because if you look at the view, in the header.php there is the horizontal navigation bar, it is positioned above the ckeditor toolbar, the header tag has the id page-topbar and my navigation bar has the class navbar-header.I tried to fix it with css but nothing worked for me):

#page-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 250px;
  z-index: 1002;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
          box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12); }

.navbar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  height: 70px;
 
  padding: 0 calc(1.25rem / 2) 0 0; }
  .navbar-header .dropdown .show.header-item {
    background-color: #f8f9fa; }
  .navbar-header .navbar-brand-box {
    display: none; }

body.vertical-collpsed #page-topbar {
  left: 70px; }
  @media (max-width: 991.98px) {
    body.vertical-collpsed #page-topbar {
      left: 0; } }

body:not(.vertical-collpsed) .navbar-header .vertical-menu-btn {
  display: none; }

body:not(.vertical-collpsed) .app-search {
  margin-left: 10px; }