6

box-sizing: border-box; で DIV のサイズを変更しようとしています。幅のサイズ変更のみを許可していますが、サイズ変更イベントが停止するたびに DIV が縮小します (高さの変更)。

私の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>

サイズを変更すると表示されます。

誰でも私を助けることができますか？JSFiddle: http://jsfiddle.net/WuQtw/4/

jquery 1.8.x.. 1.9.x を試しました...何も変わりません。box-sizing: content-box を使用できません。

4

4 に答える 4

3

私はちょうど同じ問題を発見し、このスニペットを作成しました - それが誰かを助けるかもしれません.

// 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;
        }
    });

フィドル

于 2016-11-16T13:59:19.293 に答える
0

これはあなたが赤ちゃんを探しているものですか？

jquery を 2.0.2 に更新するまで 1 年待ちます

そして、それは動作します

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>

于 2014-11-24T12:30:22.537 に答える