1
\$\begingroup\$

I was trying to constrain ui-modal-dialog closed by the "body" of html using Jquery's constrainment. I thought it was possible to just set .draggable( { containment: 'body' }): However, ui-modal-dialog always escapes and I can overscroll more than containment area such as "body" in this case( I also tried some rectangle [0, 0, 1024, 768] though, ui-modal-dialog can break its boundary). Now, I set the position: relative in the "html" and "body" in the code and it seems work so far.

My question is that I can use draggable({containment: some-container}) for constraining the ui-modal-dialog without using relative: position.?

My JS fiddle: Containment not working

https://jsfiddle.net/kimihiro/qmgs37re/

My JS fiddle: Containment with position: relative in "html" and "body" of styling Jquery.

https://jsfiddle.net/kimihiro/jtb3yhs8/

The same "Containment not working" code is below but not working here...

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
	  _title: function(title) {
	    if (!this.options.title) {
	      title.html(" ");
	    } else {
	      title.html(this.options.title);
	    }
	  }
	}));
	$("#dialog").dialog({
	  autoOpen: false,
	    height: 300,
	  width: 830,
	  dialogClass: 'myTitleClass',
	  modal: true,

	  title: "Carpe Diem. Nunca Acredito Posteiro",
	  closeOnEscape: false,
	  open: function(event, ui) {
	    $('.ui-dialog-titlebar-close', ui.dialog | ui);
	  },


	  buttons: {

	    "Save": function() {
	      $(this).trigger(updateKeyword());
	    }
	  }
	}).draggable({ containment: 'body' });

	$("#opener").click(function() {
	  $("#dialog").dialog("open");
	});
input#opener {
  height: 30px;
  width: 200px;
  left: 50%;
  margin-top: -15px;
  /* = -height / 2   */
  margin-left: -100px;
  /* = -width / 2    */
  position: fixed;
  top: 80%;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-style: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  border-style: outset;
  display: flex;
  transition: .5s ease;
  vertical-align: middle;
  justify-content: center;
}

.myTitleClass .ui-dialog-title {
  white-space: normal;
}

.myTitleClass .ui-dialog-titlebar {
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
}

.myTitleClass .ui-widget-content .ui-state-default {
  background-image: none;
  background-color: rgba(4, 115, 184, 0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.myTitleClass .ui-widget-content .ui-state-hover {
  background-image: none;
  background-color: rgb(4, 127, 184);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.ui-widget-overlay {
  position: fixed;
  background: black;
}

.myTitleClass .ui-dialog-titlebar-close {
  background: rgba(4, 115, 184, 0.9);
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -28px;
  top: -24%;
  width: 33px;
}

.myTitleClass.ui-icon-close {
  background: url("http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png");
}

.ui-dialog {
  overflow: visible;
}

#footer {
  background: #0473b8;
  color: #fff;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
}
html {
  height: 100%;
   overflow-x: hidden;

}

body {
  height: 100%;
  overflow: hidden;
  
}

}
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="opener" value="Register Keyword">
</button>
<div id="dialog">Merry Christmas.
</div>
<div id="footer">footer</div>

\$\endgroup\$
1
\$\begingroup\$

In Firefox Dev edition your original code worked fine unless I a) resized the dialog or b) the body was too small for the dialog. The fix for each is to set the containment on the resizable widget too and don't let the dialog start out larger than the body to begin with, respectively.

var maxWidth = $('body').width() - 20;
var maxHeight = $('body').height() - 20;
$("#dialog").dialog({
  autoOpen: false,
  height: maxHeight > 300 ? 300 : maxHeight,
  width: maxWidth > 830 ? 830 : maxWidth,
  dialogClass: 'myTitleClass',
  modal: true,
  draggable: true,
  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
}).draggable({
  containment: 'body'
}).resizable({
  containment: 'body'
});

Here's the updated fiddle.

\$\endgroup\$
  • \$\begingroup\$ Thanks a lot! It absolutely works on JS fiddle. However, it does not work when putting it into my HTML file and show it on the web browser such as google chrome and Firefox. Putting "position: relative" in the HTML file, it constrains the dialog within the main page at least on Google Chrome( not on firefox). Do you know how to fix this? \$\endgroup\$ – kimi Tanaka Dec 21 '17 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.