extremely odd issue

[r3wt]

As you can see in the image, i have a small search form, then below it, a box of about 288px in height (just as an example. this is the div i am using the scrollbars directive with. the content is loaded dynamically with firebase. when it loads, the content is pushed up behind the form. the inner div of the scrollbar has top: -289px which is identical to height being set with setHeight option in config. I can't understand why this is happening. I hope you can help me.

html for reference:

<div class="results-wrapper">
        <!-- search form -->
    <div class="form search-form inputs-underline">
        <form ng-submit="doSearch()">
            <div class="section-title">
                <h2>Search</h2>
            </div>

            <div class="row">

                <div class="col-xs-12">
                    <div class="form-group">
                        <label>Neighborhood</label>
                        <select class="form-control selectpicker" ng-model="search.neighborhood">
                            <option value="">Select</option>
                            <option ng-repeat="(key,val) in neighborhoods" value="{{key}}">{{key|uc_words}}</option>
                        </select>
                    </div>
                </div>

            </div>

            <div class="row">

                <div class="col-xs-12">
                    <div class="form-group">
                        <label>Price</label>
                        <div class="ui-slider" ya-no-ui-slider="priceSliderOptions" ya-no-ui-slider-events="priceSliderEvents">
                            <input class="value-min" ng-model="priceSliderOptions.start[0]" type="hidden" readonly>
                            <input class="value-max" ng-model="priceSliderOptions.start[1]" type="hidden" readonly>
                            <div class="values clearfix">
                                <input class="value-min" ng-model="priceSliderFormatted[0]" readonly>
                                <input class="value-max" ng-model="priceSliderFormatted[1]" readonly>
                            </div>
                            <div class="element"></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <button type="submit" data-ajax-response="map" data-ajax-data-file="assets/external/data_2.php" data-ajax-auto-zoom="1" class="btn btn-primary pull-right"><i class="fa fa-search"></i></button>
            </div>

        </form>

    </div>
    <!-- scrollable results div-->
    <div class="results" ng-show="results">
        <div ng-scrollbars ng-scrollbars-config="resultsScrollbarConfig">
            <div class="section-title">
                <h2>Search Results<span class="results-number">{{results.length}}</span></h2>
            </div>
            <div class="results-content">
                <div class="result-item" ng-repeat="item in results track by $index" data-id="$index">
                    <a ui-sref="app.property({ slug: item.$id })">
                        <h3>{{item.title}}</h3>
                        <div class="result-item-detail">
                            <div class="image" style="background-image: url('{{item.featuredImage}}')">
                                <div class="price">${{item.rent|number:2}}</div>
                            </div>
                            <div class="description">
                            <h5><i class="fa fa-map-marker"></i>{{item.address}}</h5>
                            <div class="rating-passive" data-rating="4">
                                <span class="stars">
                                    <figure class="active fa fa-star"></figure>
                                    <figure class="active fa fa-star"></figure>
                                    <figure class="active fa fa-star"></figure>
                                    <figure class="active fa fa-star"></figure>
                                    <figure class="fa fa-star"></figure></span>
                                <span class="reviews">6</span>
                            </div>
                            <div class="label label-default">{{item.type}}</div>
                            <p>{{item.description}}</p>
                            </div>
                        </div>
                    </a>
                    <div class="controls-more">
                        <ul>
                            <li><a href="#" class="add-to-favorites">Add to favorites</a></li>
                            <li><a href="#" class="add-to-watchlist">Add to watchlist</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

related controller logic:

function sizeInterface(){
    $(".results-wrapper .results").height( $(".results-wrapper").height() - $(".results-wrapper .form")[0].clientHeight );
}
// config
$scope.resultsScrollbarConfig = {
    autoHideScrollbar: true,
    theme: 'minimal',
    height: $(".results-wrapper").height() - $(".results-wrapper .form")[0].clientHeight,
    scrollInertia: 300,
    advanced: {
        updateOnContentResize: true
    },
};

$window.addEventListener('resize',sizeInterface);

sizeInterface();

$scope.$on('$destroy',function(){
    $window.removeEventListener('resize',sizeInterface);
});

[iominh]

hi @r3wt, thanks for the detailed ticket! I appreciate the screenshot, html, and JS. You can maybe try changing where ng-scrollbars is applied (maybe move it to the parent or child div)

If that doesn't do anything, the ng-scrollbars library is really a thin wrapper that just runs Malihu's custom-scrollbar-plugin to an element, so it might be worthwhile to also inspect your CSS and walk through the code line by line in the debugger (use the source versions rather than the production / uglified versions) as I'm not entirely sure what the plugin may see as it applies the scrollbars to an element

[r3wt]

turns out it was simply 404ing on the default stylesheet for the jquery plugin, i misspelled it in the lazyloader configuration. resolved the issue.

[iominh]

thanks @r3wt for updating this ticket with that info and I'm glad you found a resolution