My page is used to enter damages - for that I have a small form on the left side - and on the right side a listing of already documented damages, where then photo's can be uploaded for clarification of actual damage.
For each damage I display a small form where I can upload the images or delete the damage if entered by error. This small form is displayed in the center column - the right column is collecting the various photos / images. I'd like to make that 1 line of images with horizontal scrolling, but despite setting the Style of the RadzenCard to "width: 100%; padding: 10px 10px; margin: 0; overflow-x:scroll; overflow-y:hidden;" it doesnt offer scrollbars, instead after adding more and more images they are displayed in a grid with multiple lines ... How can I get the desired behavior of one single line with horizontal scrolling?
.pic-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.pic-group > .row > .col-xs-4 {
display: inline-block;
float: none;
}
.imgButton {
text-align: center;
}
<RadzenCard Style="width: 100%; padding: 10px 10px; margin: 0; overflow-x:scroll; overflow-y:hidden;" class="rounded shadow">
<div class="container">
<div class="row">
<div class="col-md-5"><!-- here the "central form" is displayed-->
...
</div>
<div class="col-md-7 align-items-center container pic-group">
<div class="row"><!-- for the "line" of images -->
foreach(var pic in picList)
{
var p = pic;
if (p.foreignID == dmgid)
{
<div class="col-xs-4 align-items-center" style="width: 210px; height: 192px; border: 0px none !important;padding: 3px !important;" >
<div>
<RadzenImage Path="@($"data:image/jpeg;base64,{Convert.ToBase64String(p.picData)}")" Style="width: 200px; height; 150px; margin: 3px;" />
</div>
<div class="imgButton">
<RadzenButton ButtonStyle="ButtonStyle.Light" Icon="delete" style="margin-top:2px !important; margin-bottom: 0px !important;display: inline-block; margin-left: 10px; font-size: x-large;" Text="Delete" Click="@(args => DeletePic(@s, @p))" />
</div>
</div>
}
}
</div>
</div>
</div>
</div>
</RadzenCard>