Приветствия и приветствия друзьям.
Сценарий:
Я делаю страницу, которая будет генерировать счета на основе информации JSON из серверной части. Он использует ng-repeat для содержащихся div и затем ng-if внутри нескольких тегов p следующим образом:
<div ng-repeat="thumb in responseArray" ng-if="responseArray.length >= 1" class="figures" layout="column" layout-align="center end">
<p><b>{{thumb.supplier_name}}</b></p>
<p class="stakedLabel">Staked:</p>
<p class="staked">{{thumb.staked}}</p>
<p class="returnsLabel">Returns:</p>
<p class="returns"> {{thumb.returns}}</p>
<p class="grossLabel">Gross: </p>
<p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
<p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
<p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
<p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
<p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
<p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
<p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
<p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
<p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
<p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
<p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
<p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
<p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
<p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
<p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
<p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
<p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
<p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>
</div>
Проблема в том, что я хочу, чтобы div в идеальном случае подстраивался по размеру в зависимости от их содержимого во время выполнения, или если не удалось просто установить две разные высоты динамически. Существует два варианта генерации div: один тип будет значительно короче, который будет использоваться, когда theList.length равен 1, а другой примерно в два раза больше размера.
Мой текущий css выглядит следующим образом:
.figures {
border-width: 2px;
border-style: solid;
border-color: black;
position: relative;
height: 180px;
top: -20px;
}
Я пробовал много разных вещей, таких как отсутствие высоты, установка высоты на авто, установка переполнения на авто, использование обходного пути clearfix и т. Д.
Любая помощь будет оценена.