Skip to content

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

Open
@youen-dev

Description

@youen-dev

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 ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions