I need my ul li list to be scrollable on mobile devices.
Here is the HTML I am using:
<div class="scrollArea ">
<ul class="selectableListItems" ng-repeat="inspectionReview in inspectionReviews">
<li class="row col-sm-6">
<input type="checkbox" ng-model="inspectionReview.IsNormal" />
{{inspectionReview.InspectionItemName}}
</li>
</ul>
</div>
These are the CSS classes I have applied:
.selectableListItems {
list-style-type: none;
padding: 5px 10px 0px 0px;
}
.scrollArea {
height: 150px;
overflow: auto;
-webkit-overflow-scrolling: auto;
overflow-x: hidden !important;
direction: ltr;
border-radius: 3px;
border-style: solid;
border-color: #dddddd;
}
.scrollArea input[type="text"] {
border: 1px;
direction: rtl;
}
.scrollArea ul {
direction: rtl;
}
This is the resulting view:
https://i.sstatic.net/gOowJ.png
However, when I view it on an Android device, the scrolling does not function properly.
After inspecting it in the Chrome debugger, I noticed an error in the CSS for scrollArea:
https://i.sstatic.net/DKiub.png
The error indicates that the property "-webkit-overflow-scrolling" is unknown. Any thoughts on why this error is occurring?