0

I have a sidebar on a webpage I manage that displays a list of responders to an emergency call when a member of that departments says they're going to that call. While the code works fine to update the view on the site to include new responders, if too many are loaded the modals being created go off the screen. I want to write a script to automatically scroll up and down the list of responders, but the div they're inside of isn't expanding causing a scroll bar to occur even when the content goes offscreen. I imagine I'm missing something with my css but have looked over this so many times I've gone blind to what could be wrong. Included below is the snippet of HTML and all applicable CSS. Let me know if you need anything more.

(Also, if there's a novel way to scroll among items in an ng-list automatically, I haven't been able to find it).

HTML:

<div class="row full-height">
    <div class="col-md-5 col-lg-4 full-height">
        <div>
            <h1 class="job-text">
                <span class="callStatusIcon {{call.type.type}}"></span>
                <span style="font-weight: bold"> {{call.cadDept}}</span> - <span class="text-primary">{{call.type._id}}</span> - {{call.description}}
                </h1>
                <h2 class="job-text" style="'font-size: 250%">
                    <p style="font-weight: bold">{{call.addr}}</p>
                    <p>{{call.timeStamp.sec | timeFormat:'HH:mm'}} hrs</p>
                </h2>
                <hr/>
        </div>
        <div ng-switch-when="true" class="full-height">
            <div class="list-group">
            <div class="col-inline-md col-inline-spacing" ng-repeat="responder in call.response">
                <div du-scrollspy="list-group-item" class="list-group-item">
                    <h4 class="list-group-item-heading"><strong>{{responder.name}}</strong> - <strong ng-class="responder.response === 'No'?'text-primary':'text-success'">{{responder.response}}</strong></h4>
                    <div class="list-group-item-content">{{responder.distance?(responder.distance | metersToMiles) + ' miles away | ':''}}{{responder.time.sec | timeFromNow}}</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

div {
    display: block;
}
.full-height {
    height: 100%;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}
@media (min-width: 1200px)
.col-lg-4 {
    width: 33.33333333%;
    float: left;
}
@media (min-width: 992px)
.col-md-5 {
    width: 41.66666667%;
}
@media (min-width: 992px)
.col-md-5
    float: left;
}
.list-group {
    overflow-y: scroll;
    margin-bottom: 20px;
    padding-left: 0;
}
.col-inline-spacing {
    margin-left: 10px;
    margin-bottom: 10px;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
}
.list-group-item-heading {
    margin-top: 0;
    margin-bottom: 5px;
}
M. Lynch
  • 1
  • 1
  • Possible duplicate of [Making a div vertically scrollable using CSS](http://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) – Brent Washburne Apr 15 '16 at 18:31
  • I can make the div scrollable, but even when the content exceeds the window, I the scroll bar still doesn't work, it's just the blank scrollbar. – M. Lynch Apr 15 '16 at 18:38
  • can you make a demo on jsfiddle or plunkr? – shershen Apr 15 '16 at 18:45
  • Not right this moment but I can later tonight. I cannot share our data so I'll have to extract this code from our site and change things around to support some fake data. – M. Lynch Apr 15 '16 at 18:47
  • I ended up solving my issue in probably not the best way, but one that works. I turned the column into a flex view and it works great now! For anyone searching in the future, this may not be the correct solution but it worked for me in this instance. – M. Lynch Apr 19 '16 at 13:45

0 Answers0