Here is the HTML code snippet I am working with:
<div id="header_context" class="scroll">
<div id="column_scroll" class="column" ng-repeat="column in columns track by column.name" ng-hide="column.name == 'date'" ng-click="column.visible = !column.visible">
<div class="checkmark" ng-class="{'checked': column.visible}"></div>
<div class="" ng-bind-html="column.title"></div>
</div>
</div>
This shows a portion of my CSS styling:
#column_scroll{
overflow: scroll;
}
.scroll{
overflow: scroll !important;
}
Within my JavaScript file, there is a function that looks like this:
$('#timeline_container #content .trips_header').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
hideContextMenu();
$('#header_context').css({
display: 'block',
left: e.clientX,
top: e.clientY,
overflow:scroll
});
$('#header_context > div').click(function(evt) {
evt.stopPropagation();
});
});
When inspecting, this is what is visible:
In some cases, such as on a PC or when the inspector is not open, it appears as follows: However, with the inspector enabled or on a laptop, it may look like this:
Clearly, there seems to be an issue where the list does not fit properly and is not scrollable as intended.