使用AngularJS的用戶界面Bootstrap警報隱藏佔用額外的空間

我有一個簡單的UI Bootstrap警報，我用來顯示錯誤信息等。我隱藏它（默認情況下）在頁面頂部的標題下方。我可以使用範圍變量來更改顏色和文本，並使用ng-hide來隱藏它。這裏是警戒HTML：使用AngularJS的用戶界面Bootstrap警報隱藏佔用額外的空間

<alert type={{alertType}} close="hideAlert = true" 
    ng-hide="hideAlert" class="ng-hide">{{alertText}}</alert>

的問題是，當頁面加載，並警告是隱藏的，有一個額外的20像素左右的空間被隱藏的警報吸收。當我檢查元素時，看起來'x'關閉按鈕佔用了21px的空間，並且不像警報那樣收縮。這是元素控制檯顯示的內容，

<button ng-show="closeable" type="button" class="close" ng-click="close($event)"> 
    <span aria-hidden="true">×</span> 
    <span class="sr-only">Close</span> 
</button>

而且，警報的文本元素做同樣的事情，除了在空間20px的 - 雖然這個空間被包含在上述21px。元素控制檯顯示此：

<div ng-transclude=""> 
    <span class="ng-binding ng-scope">Default Alert!</span> 
</div>

的警報和alert.ng隱藏的CSS是這樣的：

.alert { 
    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 

    display: block !important; 
    max-height:50px; 
    opacity: 1; 
} 

.alert.ng-hide { 
    display: block !important; 
    max-height:0px; 
    opacity: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    margin-top: 0; 
    margin-bottom: 0; 
}

爲什麼隱時現這些警報部件不被縮水任何想法？

來源

2015-09-15 Tom O' Brien

我不是百分之百確定，但不是ng-hide，你可能會使用ng-if。 ng-hide繪製並隱藏對象ng - 如果直接破壞dom。可能會使用ng-if應該解決你的問題。沒有DOM對象可能意味着屏幕上沒有像素佔用。 – ibrahimbayer

我認爲這個問題是你的CSS行display: block !important;當hideAlert是真的，UI引導施加display:none;到隱藏它完全的警報，但這個正在被display:block !important覆蓋。

我也不確定爲什麼您需要爲alert元素中的類屬性值提供ng-hide值。

我也同意ibrahimbayer使用ng-if會解決問題。

來源

2015-09-15 21:45:57

使用AngularJS的用戶界面Bootstrap警報隱藏佔用額外的空間

回答

相關問題