Calling JS loading toolbar in place it should not - SUMMERNOTE

Question

Calling JS loading toolbar in place it should not - SUMMERNOTE

Navigation

#1 by (1 votes)

0

I think I'm pretty bad with js and their derivatives. But I'll try to make the most of my mistake.

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'll call js

<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:

Itloadstwotoolbars,justliketheonesIwanttocallonlyonmypanels.

ClickingoneachofthepanelssummernotenormallyopensinpositionandasIwant.Seenextimg:

Could someone help?

javascript summernote

asked by anonymous 21.11.2018 / 19:47

1 answer

Change values of objects coming from the api? How to do external file request NodeJS

score 1 · Answer 1

Guto see my example as it works correctly as you wish, see if it does not have any CSS itself affecting summernote 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><scriptsrc="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><ulclass="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>