lqez / django-summernote

Simply integrate Summernote editor with Django project.
MIT License
1.05k stars 226 forks source link

[bug] SummernoteInplaceWidget `note-editable` computed height is negative #509

Open youen-dev opened 3 months ago

youen-dev commented 3 months ago

When using SummernoteInplaceWidget, on init, the note-editable height is computed by the function recalcHeight in django_summernote/templates/django_summernote/widget_common.html. However, in this function, the value returned by e.find('.note-toolbar').outerHeight() is incorrect (too big), which leads to a negative computed height. Details in the code below.

// django_summernote/templates/django_summernote/widget_common.html

[...]
function recalcHeight(e) {
    var nEditable = e.find('.note-editable');
    var nEditor = $('.note-editor');
    var height = parseInt(
        parseInt(settings.height)  // default
        - e.find('.note-toolbar').outerHeight()  // <-------- Returns huge value when 'recalcHeight' is called on init (always 1448 in my case)
        - e.find('.note-status-output').outerHeight()
        - e.find('.note-statusbar').outerHeight()
        - (nEditor.outerHeight() - nEditor.innerHeight())  // editor's border
    );
    nEditable.outerHeight(height);  // <-------- The resulting 'height' value is negative, which causes the div '.note-editable' to have a height set to 0
}
[...]

Executing this function again in a custom JS script, when the summernote.init event is triggered, "fixes" this issue (the height computed has the correct value).

Why does this function not work properly when called the first time, through the onInit callback ?