question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug with bootstrap 4.0.0 and summernote version is 0.8.10

See original GitHub issue

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.

summernote_crash

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);

}`

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
trantrong90commented, Aug 25, 2018

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>
0reactions
yolch-yolchyancommented, Aug 25, 2018

Thank you @trantrong90. It’s working now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting started - Summernote
The fastest way to get Summernote is to download the precompiled and minified versions of our CSS and JavaScript. No documentation or original...
Read more >
summernote | Yarn - Package Manager
Super simple WYSIWYG Editor. Build Status npm version Coverage Status. Summernote. Summernote is a JavaScript library that helps you create WYSIWYG editors ...
Read more >
Summernote non-bootstrap version problems with scroll
Try opening this example in full window and resize editor more than full window height. Try scrolling down and you will get some...
Read more >
WYSIWYG text editor - Bootstrap 4 Advanced Components
<li>Add Summernote CSS to the header before bootstrap.min.css : <code><link rel="stylesheet" ...
Read more >
Summernote Text Editor - RealPage
Summernote Version 0.8.10 ... Summernote relies on Bootstrap 4 and jQuery. ... href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found