Eric G Eric G - 6 months ago 14
CSS Question

jQuery UI Dialog Problems when trying to contain

So I've been trying to fix this problem with my dialog now properly showing up inside a container element, but I've had no luck finding any solutions.

I'm trying to contain the dialog into a div element. The div element would be the same size of the dialog, and the div would limit the resizing of the dialog.

Right now the dialog will be placed inside the div and it is limited to the div, but when i drag it, the dialog will go outside of the container.



$("#dialogtext").dialog({
appendTo: "#container",
autoOpen: true,
resizable: true

}).parent().draggable({
containment: '#container'
}).position({
my: "left top",
at: "left top",
of: "#container"
});

$('#clickMe').click(function() {
$("#dialogtext").dialog("open");
});

//$(".ui-dialog").css("position", "initial");

.main {
width: 90vw;
height: 60vh;
background-color: #fff;
border: 1px solid #eee;
border-bottom: 1px solid #ddd;
}
#container {
width: 70%;
height: 60%;
max-width: 90%;
max-height: 80%;
background-color: red;
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>

<div class="main">
<button id="clickMe">Click Me</button>

<div id="container">
<div id="dialogtext">hello world!
</div>
<!-- dialog text -->


</div>
<!-- container -->
</div>
<!-- main -->





JSFiddle

Answer

you can calculate the width and height of the div and set them to the dialog like that

$("#dialogtext").dialog({
    appendTo: "#container",   
    autoOpen: true,
    height :$('#container').height(),
    width :$('#container').width(),
    resizable: true   

});

https://jsfiddle.net/bqsd7Luk/8/

Comments