Skip to content

Wrong attributes in widget_iframe.html template #512

@JanAlster

Description

@JanAlster

When using django-summernote to get rich text editor in admin interface, the editor does not follow size settings.

In my app admin.py
`
from .models import MyModel
from django_summernote.admin import SummernoteModelAdmin

class MyModelAdmin(SummernoteModelAdmin):
summernote_fields = ('text',)
`

In my app settings.py
SUMMERNOTE_CONFIG = { ... 'summernote': { ... # Change editor size 'width': '100%', 'height': '480', ... } ... }

This will use summernote in admin interface for MyModel.text, but it will not be 480px high and full available space wide. I suspect that the reason is use of width and height attributes for summernote-div div.

in django-summernote/templates/widget-iframe.html
`

<iframe id="{{ id }}_iframe" src="{{ src }}" frameborder="0" width="{{ width }}" height="{{ height }}"></iframe>
`

If I change it to style:
`

<iframe id="{{ id }}_iframe" src="{{ src }}" frameborder="0" width="100%" height="100%"></iframe>
` things get better (it works with fixed sizes or 100%), but not perfect.

The problem is that width set in config will apply also to the internal editor in the generated html for the iframe. If I want that to be e.g. 50% width left in the parent

after admin interface places the field label there, I have to leave the summernote-div at 100% of parent.
`<div class="summernote-div" {{ flat_attrs }} style="width:100%; height:100%;">

<iframe id="{{ id }}_iframe" src="{{ src }}" frameborder="0" width="100%" height="100%"></iframe>
` This will, however, render the remaining empty part of the column with background color (I guess this is the body of the generated html).

My question is, is this a good way how to fix that? Or is there any better? I am rather new to css.

Another issue is that widget_iframe.html does not apply css files from config like widget_iframe_editor.html does. Is that intentional? The original issue could have been solved also by changing style of summernote-div elements in custom css,
but if they are not applied, it will not work.

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