Verwenden Sie jQuery resizable Padding ändern

Question

Ich versuche, jQuery Resizable zu verwenden, um das Padding auf einem Element im Wesentlichen zu bearbeiten und habe gekämpft, um diesen bösen Jungen zu arbeiten oder Ressourcen zu finden, die einen Einblick geben könnten.

Ich bin im Wesentlichen dieser Weise die Höhenänderung zu padding Wechsel zur Karte:

$(".block-wrapper").resizable({ 
     handles: "n, s", 
     resize: function(event, ui) { 

      var padding = ((ui.size.height - ui.originalSize.height)/2); 

      ui.element.css({ 
       'height': 'initial', 
       'padding-top': padding+'px', 
       'padding-bottom': padding+'px' 
      }); 

     } 

}); 

(mehr hier: https://jsfiddle.net/6vs37ot0/1/)

Und es funktioniert perfekt das erste Mal, aber wenn Sie zurück zu justieren Es wird wieder auf die ursprüngliche Größe zurückgesetzt, bevor die Größe erneut geändert wird.

Irgendwelche Ideen auf, wie ich in der Lage sein könnte, das zu lösen, wäre FANTASTISCH.

Answer 1

Ihr Problem ist mit der Linie var padding = ((ui.size.height - ui.originalSize.height)/2);

Wenn Sie den Block zu stoppen Ändern der Größe, das heißt auf mouseup, ui.originalSize.height zur letzten ui.size.height gesetzt, so ui.size.height - ui.originalSize.height ist zurück auf Null und Ihre Polsterung ist weg!

Aber warum gehen Sie die ganze Mühe mit Padding? Wenn es nur Center vertikal der Text ist, gibt es einige einfacher css Lösung.

.block-wrapper { 
    display: flex; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
} 

und die einfacheren js:

jQuery(document).ready(function($){ 
    $(".block-wrapper").resizable({handles: "n, s"}); 
});