0

Used latest jQuery 1.11.2 and 2.1.3, UI 1.11.3 ( Bootstrap 3.3.2 ). Very simple code:

<div id="abd">
  111
  <input style="width: 100%;">
</div>
<script type="text/javascript">$(document).ready(
 function(){
  $('#abd').dialog();
 }
);</script>

Certanly, it works, but after each resize action width of DIV with INPUT is decreases. If I include bootstrap.css width decreases by 34 pixel, without it by 1 pixel. Checked: FireFox, IE11. In Chrome I have extra problem - additional scrool bar in this div.

11
  • Question is: internal DIV width decreases, why? Feb 16, 2015 at 0:11
  • Check jQuery 2.1.1 - same problem. After each resize operation internal width decreases. After initialization I see "width: auto;" - and view is ok, but after any resize I have "width: (nnn)px" and nnn decreases. Feb 16, 2015 at 0:14
  • You input has style "width: 100%;" which means it should take whatever your widow width is. Feb 16, 2015 at 0:18
  • You can see mmm.pm/tmp/js/a.html Original jQuery and UI, without any modifications. width: 100% - not window width is - parent DIV. Please move up and down bottom border of dialog and width will be decreased. Feb 16, 2015 at 0:25
  • Your fiddle have same problem. Feb 16, 2015 at 0:27

3 Answers 3

0

This is a bug in jQuery UI with a minor priority. Two weeks ago it was not fixed, but a solution was submitted. You can read about it here

2
  • Tomorrow is the President Day Holiday :) Feb 16, 2015 at 1:10
  • Not in my country :) Try to fix it in 2.1.3, but no so simple, code was changed. I can fix second part, but first was moved to _applyChanges and use el.width\height() functions has strange effect: I can move bottom border and width stay correct, but then I move right border internal DIV width increases :) and go out of dialog border. Feb 16, 2015 at 10:22
0

Very bad bugfix for jQuery UI 1.11.3 , tested only for UI Dialog (I use custom package only with this component).

before:

_applyChanges: function () {
    var props = {};

    if (this.position.top !== this.prevPosition.top) {
        props.top = this.position.top + "px";
    }
    if (this.position.left !== this.prevPosition.left) {
        props.left = this.position.left + "px";
    }
    if (this.size.width !== this.prevSize.width) {
        props.width = this.size.width + "px";
    }
    if (this.size.height !== this.prevSize.height) {
        props.height = this.size.height + "px";
    }

    this.helper.css(props);

    return props;
},

after:

_applyChanges: function () {
    var props = {};
    if (this.position.top !== this.prevPosition.top) {
        props.top = this.position.top + "px";
    }
    if (this.position.left !== this.prevPosition.left) {
        props.left = this.position.left + "px";
    }
    this.helper.css(props);
    if (this.size.width !== this.prevSize.width) {
        props.width = this.size.width + "px";
        this.helper.width(this.size.width);
    }
    if (this.size.height !== this.prevSize.height) {
        props.height = this.size.height + "px";
        this.helper.height(this.size.height);
    }
    return props;
},

And in resize

if (sum && sum >= 0) {
    style[prop] = sum || null;
}

changed to:

if (sum && sum >= 0) {
    if($.inArray(prop,['width','height'])>=0){
        el[prop](sum);
    }else{
        style[prop] = sum || null;
    }
}
1
  • Not a solution. If bootstrap ( box-sizing: border-box; ) included it works, but without it internal div still decreases. Feb 16, 2015 at 13:48
0

A new bad fix. I can make smoothly resize in page with bootstrap and without it.
1. remove ui plugin ("resizable", "alsoResize");
2. Add this to the end of _mouseDrag of "ui.resizable" widget
P.S. So, how I write in this question title - this is only for dialogs fix.

$('DIV.alj-ui-dialog-content').each(function(){
    el = $(this);
    el.width(
        el.parent().width()
        - parseInt(el.css('paddingLeft'),10) - parseInt(el.css('paddingRight'),10) - 1
    );
    el.height(
        el.parent().innerHeight()
        - parseInt(el.css('paddingTop'),10) - parseInt(el.css('paddingBottom'),10)
        - $(el.parent().children('.alj-ui-dialog-titlebar')[0]).outerHeight()
        - parseInt(el.parent().css('paddingTop'),10) - parseInt(el.parent().css('paddingBottom'),10) - 3
    );
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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