內聯塊元素可調整大小的JQuery UI會導致父級在Chrome中奇怪地移動

我正在嘗試使用戶可以調整顯示內聯塊的div的大小。這有點難以解釋，但我會試一試。當您調整第一個元素的大小並導致兄弟姐妹包圍時，然後一旦繼續調整第一個元素的高度，父級開始向下移動頁面。如果您然後打開開發人員工具，只需切換溢出：隱藏關閉，然後在元素將自己定位在適當的位置。內聯塊元素可調整大小的JQuery UI會導致父級在Chrome中奇怪地移動

How it looks on load

How to looks after resizing the the div first. Notice the parent div has moved down the page

<div class="canvas"> 
    <div class="resize" style="width: 300px; height: 250px;"> 
     <div class="resize"></div> 
     <div class="resize"></div> 
    </div> 
</div> 


.resize{ 
    width: 100px; 
    height: 100px; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid #BBB; 
    overflow: hidden; 
}

步驟來重現 http://jsfiddle.net/6jHT3/5/

確保你是在鉻
調整，說先在它的高度和DIV的寬度。繼續調整大小，直到第二個div的div覆蓋，然後繼續調整高度的大小
注意父div向下移動。
單擊修復溢出。這只是觸發溢出到汽車再到隱藏
通知父移回，你希望它是

編輯：此外，我需要家長要溢出：汽車或溢出：隱藏

這裏的任何想法。我只注意到這發生在鉻。我測試了Firefox和IE10，它似乎在那裏工作得很好。

來源

2014-02-25 Nick Sorrentino

我添加了一個新的CSS類父DIV

.resize2{  
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid #BBB; 
    }

我創建了一個小提琴

http://jsfiddle.net/kw6wz/

請告訴我們，如果這是你所需要的。

來源

2014-02-25 17:17:32 user3260861

謝謝。這確實會解決這個問題，但是我沒有注意到我需要父項溢出的事實：auto或hidden;一旦應用於父div，行爲將返回 –

您可以保持溢出：自動或隱藏。如果我們刪除style屬性中父div的高度和寬度指定以及css – user3260861

這很有用，它使我成爲一個解決方案！所以，因爲我有時需要父母是一個確切的大小，比如200x300，我可以做max-width：200px; min-width：200px; max-height：300px; min-height：300px;這是完美的！ –

user3260861幫我在這裏得出結論。設置高度和寬度似乎會導致問題。由於我仍然需要父級可調整大小，因此我所做的是將父級的最大高度和最小高度設置爲調整大小開始時的高度。調整大小停止後，我將高度和寬度恢復爲原始值。

http://jsfiddle.net/6jHT3/7/

var startResize = function(e){ 
    var $this = $(this), 
     $parent = $this.parent(), 
     pHeight, 
     pWidth; 

    if ($parent && $parent.length){ 
     pHeight = $parent.height(); 
     pWidth = $parent.width(); 

     $parent.css({ 
      'max-width': pWidth, 
      'min-width': pWidth, 
      'max-height': pHeight, 
      'min-height': pHeight, 
      'height': 'auto', 
      'width': 'auto' 
     }); 
    } 

}; 

var stopResize = function(){ 
    var $this = $(this); 
     $parent = $this.parent(), 
     width = $parent.css('max-width'), 
     height = $parent.css('max-height'); 

    $parent.css({ 
     'max-width': 'none', 
     'min-width': 0, 
     'max-height': 'none', 
     'min-height': 0, 
     'height': height, 
     'width': width 
    }); 

}; 

$('.resize').resizable({ 
    start: startResize, 
    stop: stopResize 
});

來源

2014-02-26 18:34:27

內聯塊元素可調整大小的JQuery UI會導致父級在Chrome中奇怪地移動

回答

相關問題