Interfaccia utente JQuery ridimensionabile + ridimensionamento della casella: border-box = altezza bug?

Question

Sto provando a ridimensionare un DIV con ridimensionamento della scatola: border-box; Anche se permetto solo il ridimensionamento della larghezza, il DIV si restringe ogni volta che si interrompe l'evento di ridimensionamento (variazioni di altezza).

mio 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> 

ridimensionarla e vedrete.

Qualcuno può aiutarmi? JSFiddle: http://jsfiddle.net/WuQtw/4/

Ho provato jquery 1.8.x .. 1.9.x ... non cambia nulla. Non posso usare il ridimensionamento della scatola: contenuto-scatola.

Answer 1

Non so perché sta accadendo, ma sembra che la tua proprietà border sia il problema.

Se si desidera che funzioni allo stesso modo, è possibile utilizzare outline.

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

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

Answer 2

isthiswhat siete alla ricerca per il bambino?

solo aspettare un anno per aggiornare jQuery per 2.0.2

e quindi funziona

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>

Answer 3

Ho appena scoperto lo stesso problema e costruire questa snippet: può aiutare qualcuno.

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

Fiddle

Answer 4

ho risolto un simile emesso avvolgendo l'elemento. Usa un div con un bordo di 0 per avvolgere il tuo elemento originale.

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