jQuery UI bug on resize
Open the jQuery UI dialog by clicking on the New / More buttons, then try re-sizing the dialog vertically. You will see the bug that width of the content decreases automatically.
by Khurram Hassan
July 24, 2015
HTML
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button id="btnNew" class="btn btn-info">New</button>
<button id="btnMore" class="btn btn-info">More</button>
<div class="popUpHolder" style="">
<div id="popOutNewFolder" title="Create New Folder" style="width: 300px">
<input id="txtFolderName" type="text" class="form-group form-control" placeholder="Folder Name" value="New Folder" maxlength="25">
<input id="btnAdd2MyFolder" type="button" class="btn btn-success pull-right" value="Add">
</div>
<div id="popOutMoreFolder" title="More Folder" style="width: 300px">
<div class="">
<div class="">
<input id="txtClientName" type="text" class="form-group form-control" placeholder="Client Name" maxlength="25">
</div>
<div class="">
<input id="txtClientFolder" type="text" class="form-group form-control" placeholder="Folder Name" value="New Folder" maxlength="25">
</div>
</div>
<div class="">
<div class="">
<input id="btnMakeCurrent" type="button" class="btn btn-success pull-right" value="Make Current" style="margin-left: 10px">
<input id="btnView" type="button" class="btn btn-primary pull-right" value="View">
</div>
</div>
</div>
</div>
CSS
.popUpHolder {
display: none;
position: absolute;
z-index: 99;
top: 120px;
right: 300px;
}
JavaScript
$(document).on("click", "#btnNew", function () {
$("#popOutNewFolder").dialog({
show: "blind",
hide: "blind",
modal: true
});
});
$(document).on("click", "#btnMore", function () {
$("#popOutMoreFolder").dialog({
show: "blind",
hide: "blind",
modal: true
});
});