1

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 class="container1" id="dialog1" hidden="hidden">
        <iframe class="responsive-iframe1" 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 class="iframe-wrapper"/>

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

  • jQuery UI went into "maintenance-only mode" years ago with no further releases planned. Yet, maybe these previous answers will help [Using responsive iframe within jQuery dialog box](https://stackoverflow.com/questions/58772996/using-responsive-iframe-within-jquery-dialog-box) and [Responsive jQuery UI Dialog](https://stackoverflow.com/questions/16471890/responsive-jquery-ui-dialog-and-a-fix-for-maxwidth-bug) – Yogi Nov 28 '22 at 13:37
  • I actually saw both of these posts earlier today and did exactly as suggested. nothing seemed to be working ;/ –  Nov 28 '22 at 14:06

1 Answers1

0

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/

Paulo Fernando
  • 3,148
  • 3
  • 5
  • 21
  • Man you literally made my day:) Jesus I was trying so many different things,this one works like magic ! Thanks !! –  Nov 28 '22 at 18:06