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 notifications@github.com 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 https://github.com/danielm/uploader/issues/85#issuecomment-435688053, 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;
}