css - Summernote - 工具栏后面的文本区域

Question

我在 Laravel 应用程序中使用 summernote。

               <div id="editIssue" style="display: none">
                    <form class="form-horizontal" action="{{route('projects.issues.update', $issue)}}" method="put">
                        @csrf
                        <div class="form-group row">
                            <label for="title" class="col-sm-2 text-right control-label col-form-label">Title*</label>
                            <div class="col-sm-10">
                                <input type="title" class="form-control" name="title" id="title" placeholder="Title" value="{{$issue->title}}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 text-right control-label col-form-label">Description</label>
                            <div class="col-sm-10">
                                <textarea id="description" name="description"></textarea>
                            </div>
                        </div>

                        <div class="form-group m-b-0">
                            <div class="offset-sm-2 col-sm-10">
                                <button type="submit" class="btn btn-info waves-effect waves-light m-t-10">Save</button>
                            </div>
                        </div>
                    </form>
                </div>

我使用带有显示/隐藏功能的 jquery 按钮打开 div。

当我打开div 时，summernote 的内容文本位于工具栏后面。当我滚动窗口或调整窗口大小时，内容文本会正确显示。

当我删除 style="display: none" 时，文本会正确显示。

summernote和show/hide div有没有冲突？

滚动前:

滚动后:

Answer 1

我们发现在打开 summernote 文本区域之前滚动时，一些 css 被添加到工具栏和工具栏包装器中。为了解决这个问题，我只是添加了以下代码来删除添加的 css。

$('#myModal').on('shown.bs.modal', function(){
    $('.note-toolbar-wrapper').removeAttr('style');    
    $('.note-toolbar').removeAttr('style');
})