Search code examples
csshtmltext-editorsummernote

summernote editor dropdown is hiding behind another editor

Steps to reproduce:

Go to the URL: https://summernote.org/examples/

Click on Font / Color dropdown

It's not overlapping / hiding behind the another editor

enter image description here

Any help would be appreciated.

Solution

  • Using Chrome, I see the same issue on the multiple editor example on the summernote site in which the drop down menu is obscured by the toolbar of the editor below. Even though the z-index appears correct (1000 for dropdown and 500 for toolbar below), I was able to get it to display correctly by forcing the z-order to be 400 for the lower toolbar.

    However, when I went to create a js fiddle with the workaround, it appeared to behave correctly.

    Working JSFiddle

    HTML

    <div class="multiple"><p>summernote 1</p></div>
<div class="multiple"><p>summernote 2</p></div>
<div class="multiple"><p>summernote 3</p></div>
<div class="multiple"><p>summernote 4</p></div>
<div class="multiple"><p>summernote 5</p></div>

    Javascript

    $(document).ready(function() {
  $('.multiple').summernote();
});

    I've been using summernote with multiple editors without issue (I just checked it was still working).

    I don't have an answer as to what is broken on the example page but I also don't have enough reputation to post this partial answer/suggestion as a comment. If you post a jsfiddle with your issue, I may be able to help further.