CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eric G
Eric G

Reputation: 926

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

Upvotes: 0

Views: 45

Answers (2)

Robert
Robert

Reputation: 2824

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   

}).resizable({ 
    alsoResize: "#container", // Resize the container
    containment: "#container" // Contain the resize to be in the container
});

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

Upvotes: 2

James Sherburn
James Sherburn

Reputation: 99

You said that you want to "limit the resizing of the dialog" if you want to do this why not set resizable to false?

JS

Upvotes: 0

Related Questions