Frage JQuery UI Resizable + Box-Sizing: border-box = Höhe Bug?


Ich versuche, ein DIV mit Box-Sizing zu skalieren: border-box; Obwohl ich nur die Größe der Breite ändern kann, verkleinert sich der DIV jedes Mal, wenn das Größenänderungs-Ereignis aufhört (Höhenänderungen).

Mein CSS

.test{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;

}

Javascript

$(document).ready(function() {
    $('.test').resizable({handles: 'e', stop: function(event, ui){
        $('.wdt').text(ui.size.height);
    }});
});

HTML

<div class="test">
    Test
</div>
<br/>
<br/>
<span>Height =</span>
<span class='wdt'></span>

Größe ändern und Sie werden sehen.

Kann mir jemand helfen? JSFidel: http://jsfiddle.net/WuQtw/4/

Ich habe versucht, jquery 1.8.x .. 1.9.x ... nichts ändert sich. Ich kann Box-Sizing nicht verwenden: content-box.


6
2017-08-20 20:18


Ursprung


Antworten:


Ich weiß nicht, warum es passiert, aber es scheint deine border Eigenschaft ist das Problem.

Wenn Sie möchten, dass es gleich funktioniert, können Sie verwenden outline stattdessen.

http://jsfiddle.net/WuQtw/10/

.test{
    width:200px;
    height: 100px;
    outline:1px solid red;
    box-sizing: border-box;
}

9
2017-08-20 20:30



Ich habe gerade das gleiche Problem entdeckt und dieses Snippet erstellt - möge es jemandem helfen.

// initiate correction
var iHeightCorrection = 0;

var oElement = $('#elementToResize');

// init resize
oElement.resizable({
        handles: 's',
        minHeight: 30,
        // on start of resize
        start: function(event, ui) {
            // calculate correction
            iHeightCorrection = $(oElement).outerHeight() - $(oElement).height();
        },
        // on resize
        resize: function(event, ui) {
            // manual correction
            ui.size.height += iHeightCorrection;
        },
        // on stop of resize
        stop: function(event, ui) {
            // reset correction
            iHeightCorrection = 0;
        }
    });

Geige


1
2017-11-16 13:59



Ist das was du suchst Baby?

Warten Sie ein Jahr, um jQuery auf 2.0.2 zu aktualisieren

und dann funktioniert es

http://jsfiddle.net/WuQtw/37/

//it worked on jsfiddle using  jQuery UI 1.10.3
$(document).ready(function() {
  
    $('.test').resizable({ 
      
      stop: function(event, ui){
        
        $('.wdt').text(ui.size.height);
        
    }});
});
.test{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="test">
      Test
</div>
<br/>
<br/>
<span>Height =</span>
<span class='wdt'></span>


0
2017-11-24 12:30



Ich löste eine ähnliche Ausgabe, indem ich das Element umwickelte. Verwenden Sie ein div mit einem Rand von 0, um das ursprüngliche Element zu umbrechen.

.wrapperDiv {
    position:absolute; 
    height:100px; 
    width:100px; 
    border: 0px;
}

.innerDiv{
    height:100%; 
    width:100%;
    background-color:rgba(0,0,0,0);
    border: 3px solid gold;
    border-radius: 5px;
    box-sizing: border-box
}
...
var tSelectionDiv = $('<div class="wrapperDiv"><div class="innerDiv"></div></div>');
...
tSelectionDiv.resizable({
    handles: 'e, w', 
    containment:someContainerElement
});

0
2018-01-03 20:19



Wechsel von box-sizing: border-box zu box-sizing: content-box sollte funktionieren.

JSFidel: http://jsfiddle.net/WuQtw/65/

Referenz: https://bugs.jqueryui.com/ticket/9137


0
2018-06-26 23:27