Search code examples
djangodjango-adminjquery-ui-dialog

Iframe in jQuery dialog doesn't have any style

I have a Django admin application that displays a jQuery dialog showing a page in an iframe inside the dialog that I show using:

function opendialog(page, dialog_title) {

            var $dialog = $('#applied-assay')
            .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
            .dialog({
                title: dialog_title,
                autoOpen: false,
                dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                draggable:true

            });

            $dialog.dialog('open');
} 

function open_modal(url, title)
{
        opendialog(url, title);     

        return false;
}

So far, so good. However the content of the iframe doesn't have any style:

enter image description here

The html template rendered inside the iframe looks like:

{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}


<div class="modal-dialog">
        <div class="modal-content">                
                <form role="form" action="{% url 'myapp:applied_assay' 1 %}" method="post">               
                    <div class="modal-header">                      
                        <h3>Select applied assay type 1</h3>
                    </div>
                    <div class="modal-content">
                                    {% csrf_token %}
                            <div class="panel panel-default">
                                    <div class="panel-body">
                                            {{ form.as_p }}
                                    </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                            <div class="col-lg-12 text-right">
                                    <input type="submit" class="btn btn-primary" name="submit" value="Accept">
                                    <button type="button" class="btn btn-default" onclick="return close_modal()">
                                            Cancel
                                    </button>
                            </div>
                    </div>
                </form>
        </div>
</div>

Any ideas?

Solution

  • You need to also include stylesheets in the header of your iframe and the respective classes in the html tags. You've only included a jquery-ui css file, but haven't used any of its classes in the iframe elements.