Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below:
<div class="DataItem" dir-paginate="x in parametersToDisplay | orderBy:'Name' | filter:textFilter | itemsPerPage: pageSize" current-page="currentPage" ng-hide="x.DetailLevel > detailLevel">
<label id="lblParameterName{{x.ConfigId}}" class="DataItemLabel">{{x.Name}}</label>
<label id="lblDescription{{x.ConfigId}}" class="DataItemLabel">{{x.Description}}</label>
<label id="lblUnits{{x.ConfigId}}" class="DataItemUnits">{{x.Units}}</label>
<input id="txtParameterValue{{x.ConfigId}}" class="DataItemValue" type="text" ng-blur="CheckCongigValue($event, x)" value="{{x.Value}}" />
</div>
</div>
One of the issues I'm facing is that even though the hidden divs are not visible, they still occupy space on the page. Interestingly, when I remove the pagination and simply use a div with ng-repeat, the hidden divs disappear completely as expected.
I've come across information suggesting that bootstrap CSS for hiding elements uses "display:hidden", which clashes with AngularJS's "display:none". It seems like this conflict might be causing the problem, but despite trying various solutions, I haven't been able to resolve it.
If anyone could provide a straightforward example demonstrating how to address this issue, I would greatly appreciate it.
Thank you in advance!