File List does not look accurate with lots of files being uploaded

[Abolfazl]

When I am adding a lot of files, the spacing starts to look very off.

To see an example of this, go to the Basic Demo and then in console run ui_multi_add_file('xxx','xxx') around 5+ times just to add these examples. You will see the CSS starts looking a little borked.

Here is a screenshot when I try to add 10 files.

I tested on Chrome, Firefox, and Edge and this only seems to be a problem on Chrome. Can anyone else verify?

[SapientHetero]

I saw the same thing. Changed the .css for the file list to remove flex classes, IIRC.

[Abolfazl]

I saw the same thing. Changed the .css for the file list to remove flex classes, IIRC.

I do not see any flex classes in the jquery.dm-uploader.min.css or styles.css files

[SapientHetero]

They're inherited from bootstrap. Use chrome developer tools to look at styles.

…

On Sun, Nov 4, 2018, 12:18 PM Bijan ***@***.***> wrote: I saw the same thing. Changed the .css for the file list to remove flex classes, IIRC. I do not see any flex classes in the jquery.dm-uploader.min.css or styles.css files — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#85 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AlmII1pLaoBw1PvfqmuZGvCwSM3WjVL3ks5uryFqgaJpZM4YJfm0> .

[SapientHetero]

Here are your culprits. -webkit-box-flex and flex. Turn 'em off and you're good to go
It's been awhile, but I believe I fixed this using the following .css to override the @media css in grids.css. Make sure it is loaded AFTER your bootstrap css.

[class*="col-"] {
	padding-top: 1rem;
	padding-bottom: 1rem;
}   
hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
#files {
    overflow-y: scroll !important;
    min-height: 320px;
}
@media (min-width: 768px) {
	#files {
		min-height: 300;
	}
}

.

[SapientHetero]

Now it looks like this: .

I also had to tweak the scrolling script to force the currently-uploading file to be visible at all times. It looks like this:

function scrollToView(element, parent) {
    element = $(element);
    parent = $(parent);

    var tMarg = parseInt(element.css("margin-top"));
    var bMarg = parseInt(element.css("margin-bottom"));
    var height = element.innerHeight() + tMarg + bMarg;
    var offset = element.position().top;
    var offset_end = element.position().top + height;
    var visible_area_start = parent.scrollTop();
    var visible_area_size = parent.innerHeight();

    //console.log("offset=",offset,"visible_area_start=",visible_area_start,"offset_end=",offset_end,"visible_area_size=",visible_area_size);

    if (offset < 0) {
        parent.animate({scrollTop: offset}, 50);
        return false;
    } else if (offset_end > visible_area_size) {
        parent.animate({scrollTop: parent.scrollTop() + height}, 50);
        return false;
    }

    return true;
}