Htykuut

I have a situation where if I flip my monitor to portrait so it is very tall, infinite scroll will never trigger to add more items and scroll. EG

When I flip my monitor to landscape it works again.

What should I do to make infinite scroll load more items when the screen in in portrait mode?

<div layout="column"

     layout-fill

     layout-padding>

    <div layout="row"

         layout-align="start center">

        <span flex="50">

            <md-input-container class="md-block"

                                cb-focus>

                <label class="cb-field-label">Filter History</label>

                <input type="text"

                       id="search-filter"

                       name="search-filter"

                       ng-model="$ctrl.historyFilter"

                       ng-model-options="{ debounce: 300 }">

            </md-input-container>

        </span>

        <span flex></span>

    </div>

    <div layout="column">

        <div class="standardTable">

            <table>

                <thead>

                    <tr>

                        <td>Date</td>

                        <td>Action</td>

                        <td>User</td>

                        <td></td>

                    </tr>

                </thead>

                <tbody infinite-scroll="$ctrl.search()"

                       infinite-scroll-distance="3"

                       infinite-scroll-disabled="$ctrl.noMoreResults"

                       infinite-scroll-container="'div#mainContainer'">

                    <tr ng-repeat="history in filteredHistory = ($ctrl.history |  filter : $ctrl.filterHistory) | orderBy: '-date'  "

                        height="46">{{history}}

                        <td>

                            <cb-user-date-time date="history.date"></cb-user-date-time>

                        </td>

                        <td>

                            <cb-enum id="history.eventType"

                                     options="$ctrl.eventTypes"></cb-enum>

                        </td>

                        <td>{{history.contactName}}</td>

                        <td class="actions">

                            <md-button class="md-icon-button md-raised"

                                       ng-click="$ctrl.historyInfo($event, history)"

                                       ng-if="history.details.length > 0">

                                <md-icon>help_outline</md-icon>

                            </md-button>

                        </td>

                    </tr>

                    <tr ng-if="$ctrl.history.$resolved && filteredHistory.length < 1 && !$ctrl.historyFilter">

                        <td colspan="4">

                            <md-icon class="md-accent">info</md-icon>&nbsp;There is no History activity on this Lot

                        </td>

                    </tr>

                    <tr ng-if="$ctrl.history.$resolved && filteredHistory.length < 1 && !!$ctrl.historyFilter">

                        <td colspan="4">

                            <md-icon class="md-accent">info</md-icon>&nbsp;There was no History activity found

                        </td>

                    </tr>

                    <tr ng-if="!$ctrl.history.$resolved ">

                        <td colspan="4">

                            <div layout="row">

                                <div class="loader"></div>

                                &nbsp;&nbsp;Please wait, loading...

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>