Bug with bootstrap 4.0.0 and summernote version is 0.8.10

steps to reproduce.

This happens in almost every browser. For example, Mac OS with chrome(Version 68.0.3440.106 (Official Build) (64-bit))

The buttons layout is crashing and a few unknown icons are showing at the top left of the browser. See the attached image.

The code is below.

`private initCheckingArea() { const addComment = function (context) { const ui = jQuery.summernote.ui;

  // create button
  const button = ui.button({
    contents: '<i class="fa fa-child"/> Add Comment',
    tooltip: 'Add Comment',
    container: false,
    click: function () {
      const tooltip = jQuery('#commentData').val();

      let range;
      if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);

        const selectedText = range.toString();
        const html = '<b title="' + tooltip + '">' + selectedText + '</b>'

        range.deleteContents();
        const div = document.createElement('b');
        div.innerHTML = html;
        const frag = document.createDocumentFragment();
        let child;
        while ( (child = div.firstChild) ) {
          frag.appendChild(child);
        }
        range.insertNode(frag);
      }
      jQuery('#commentData').val('');
    }
  });

  return button.render();   // return button as jquery object
};

jQuery('#verifiedWork').summernote({
  dialogsInBody: true,
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['color', ['color']],
    ['misc', ['undo', 'redo', 'fullscreen']],
    ['mybutton', ['addComment']]
  ],
  buttons: {
    addComment: addComment
  }
});

jQuery('#verifiedWork').summernote('pasteHTML', this.work.content);

}`

[trantrong90]

Add this CSS code to your html file. It is better on bootstrap v4.1.2

<style>
       /*fix dropdown*/
        .note-btn-group .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .note-popover .popover-content .note-color .dropdown-toggle,
        .note-editor .panel-heading.note-toolbar .note-color .dropdown-toggle {
            width: 20px;
            padding-left: 1px;
        }

        /*fix icon button*/
        .note-editor .btn-default {
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }
        .note-editor .btn-default:hover {
            color: #333;
            background-color: #e6e6e6;
            border-color: #adadad;
        }
       .note-editor .dropdown-toggle:after{
            content: initial;
        }

        /*fix background toolbar*/
        .note-editor .panel-default > .panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        /*fix modal*/
        .note-editor .modal-header{
            display: block;
        }

        /*fix popover*/
        .note-popover{
            display: none;
        }
</style>

[yolch-yolchyan]

Thank you @trantrong90. It’s working now.