w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
jQuery UI Dialog Resizing breaks content width

I found a solution, it's not 100% perfect but it does the job well enough.

As the edit in my post says, the issue was being caused by this CSS in Bootstrap 3.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

I created a file, and included it after I included bootstrap which overrides these settings for the dialog only.

.ui-dialog-content {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

This causes the dialog to behave, mostly. A few issues still persist, although they are minor issues.

  1. The middle section is still about 5 pixels too wide now. As shown here: http://www.screencast.com/t/0nzFa9Kd
  2. Everytime you click and resize the box, the button area is cut off by about 5 - 10 pixels each. Eventually the buttons are nearly hidden completely, as shown here: http://www.screencast.com/t/EbNT7JjGX

These issues are minor in comparison, so for now I'll ignore them. Hope this helps someone else!





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.