Summernote dropdown doesn't work with Bootstrap navbar

5
votes

I use bootstrap framework for navbar and now I wanna use summernote WYSIWYG HTML editor.

If I import bootstrap.min.js script, navbar dropdown menu works perfectly, but dropdown in summernote not (color choose etc.).

If I remove this script, summernote works, but navbar dropdown not. I also remove jquery.min.js and create own script for add class open to dropdown-toggle because with jquery.min.js summernote don't appear.

Any solution for navbar and summernote dropdown function?

6
javascriptjqueryhtmlcsstwitter-bootstrap

6 Answers

3
votes

Try this:

$("#yourid").summernote();
$('.dropdown-toggle').dropdown();
1
votes

Check to see that jQuery and Bootstrap are only being loaded once

1
votes

try that, i think you could be able to solve it by css

  .dropdown-menu > li > a {
           display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
  }
1
votes

I had same problem, It was solved by replacing bootstrap version use this

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
0
votes

in summernote.css file find 

.panel-heading.note-toolbar{padding:0 0 5px 5px;margin:0;}

change to 

.panel-heading.note-toolbar{padding:0 0 5px 5px;margin:0;overflow-y: unset;}
0
votes

Check your jquery version. jQuery for summernote should be upper than 3.0.0.