my iframe by itself is responsive but the dialog it is inside is not( or even the div itself because it seems like the dialog is responsive).. it is also part of an entire html page which is responsive. so what I basically want is to make that div responsive

example of responsive Iframe itself: (I can play with the size and it will be fine) ResponsiveIFrame

example as part of the entire page: NotResponsiveWhenPartOfAPage

js

$(function () {
    $("#dialog1").dialog({
        autoOpen: false,        
        width: 1400,
        height: 900,
        position: { my: 'top', at: 'top 20' },
    });
    $("#opener").click(function () {
        $("#dialog1").dialog('open');
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');
        //$(".ui-dialog-titlebar").hide();
    });
});

css

.container1 {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 75%;  
}

.responsive-iframe1 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

   <div  id="dialog1" hidden="hidden">
        <iframe  src="https://tviot.slika-ins.co.il/negishut.html"></iframe>
    </div>

** note ** : I noticed that if I display the DIV itself just like (without the hidden and id fields)->

<div />

it will work fine and is responsive. but as soon as I make it hidden and activate it onclick(jquery above), it isnt going to work.. I only can assume that because Im using "hidden" the element is not yet recognized by the page and the scale tag will not affect it. wild guess..

demo code just for the dialog and the iframe: https://jsfiddle.net/1gdsLoe3/1/

kinda lost, what should I do?

Thanks everyone

CodePudding user response：

Maybe this can help? The workaround way

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
  width: 90% !important;
  left: 5% !important;
}

https://jsfiddle.net/ne1qsLxz/