Call JS loading Toolbar in place it shouldn’t - SUMMERNOTE

Question

I believe I am very bad with js and its derivatives. But I will try to detail to the maximum my error.

I have a navbar with two options.

<ul class="nav nav-tabs" data-tabs="tabs">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#desktop" data-toggle="tab">
                                                <i class="material-icons">desktop_mac</i> Versão Desktop
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#mobile" data-toggle="tab">
                                                <i class="material-icons">phonelink_setup</i> Versão Mobile
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </a>
                                        </li>
                                    </ul>

Each item of this "ul" will open a following tab-pane:

<div class="tab-content">
                                <div class="tab-pane" id="desktop">
                                    <div class="summernote">summernote 1</div>
                                </div>

                                <div class="tab-pane" id="mobile">
                                    <div class="summernote">summernote 2</div>
                                </div>
                            </div>

Then I make the call

<script>

    $(document).ready(function () {
        $('.summernote').summernote({
        disableDragAndDrop: true,
            shortcuts: false,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic']],
                ['para', ['ul', 'ol']],
            ],
            placeholder: 'Escreva aqui os termos de uso da versão Desktop',
            height: 400,
            airMode: false,
        });
    });
</script>

My problem: is that when loading the page summernote is leaving a type of Toolbar in the upper left corner of the page, as shown in the following image:

It loads two toolbars, as if they were the ones I want to call solely on my panels.

By clicking on each of the panels summernote normally opens at the position and as I want. See following img:

Could someone help?

Answer 1

Guto see my example how it works correctly as you wish, see if there is none CSS itself affecting summernote’s Css:

$(function() {
  $('.summernote').summernote({
    disableDragAndDrop: true,
    shortcuts: false,
    toolbar: [
      // [groupName, [list of button]]
      ['style', ['bold', 'italic']],
      ['para', ['ul', 'ol']],
    ],
    placeholder: 'Escreva aqui os termos de uso da versão Desktop',
    height: 400,
    airMode: false,
  });
});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

<ul class="nav nav-tabs" data-tabs="tabs">
  <li class="nav-item">
    <a class="nav-link" href="#desktop" data-toggle="tab">
      <i class="material-icons">desktop_mac</i> Versão Desktop
      <div class="ripple-container"></div>
      <div class="ripple-container"></div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#mobile" data-toggle="tab">
      <i class="material-icons">phonelink_setup</i> Versão Mobile
      <div class="ripple-container"></div>
      <div class="ripple-container"></div>
    </a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="desktop">
    <div class="summernote">summernote 1</div>
  </div>

  <div class="tab-pane" id="mobile">
    <div class="summernote">summernote 2</div>
  </div>
</div>