How can I move the scrollbar to the left while keeping ng-repeat population from left to right?
I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the left, so I tried using direction: rtl;. However, this causes my ng-repeat data to fill in from right to left instead of left to right.
As far as I know, direction:rtl is the only way to move the scrollbar to the other side. Is there another method or tool that I am overlooking to achieve this without using direction: rtl? Alternatively, is there a way to revert the content back to left-to-right alignment?
Here's my HTML:
<div class="h-blue-holding-grid">
<div class="blue-holding-item" ng-repeat='img in recipeArray'>
<div class="h-blue-holdingImg"><img src="/imgs/redhead.png" width="45" height="45"></img></div>
<div class="h-blue-smalltime">{{Math.floor(img.data.data.start_time_ms/1000/60)}}:{{img.data.data.start_time_ms/1000%60}}<span ng-if="img.data.data.start_time_ms/1000%60 < 10">0</span></div>
<div class="h-blue-smallfont">{{img.data.data.name}}</div>
</div>
</div>
And here's my CSS:
.h-blue-holding-grid{
width: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-gap: 3px 3px;
margin-right: 5vh;
height: 25.5vh;
overflow-y: scroll;
direction: rtl;
}
.blue-holding-item{
width: 100%;
height: 8vh;
text-align: left;
background-image: url(/imgs/gradient_blue.png);
background-size: 20vh 8vh;
color: white;
font-family: "Segoe UI";
font-weight: bold;
display: grid;
grid-template-columns: auto auto;
}
.h-blue-holdingImg{
grid-row-start: 1;
grid-row-end: 3
}
Thank you,