jQuery放大和缩小可滚动div，当所有内容可见时消除滚动

Question

我创建了一个包含各种列的页面。这些列最终可能会超出屏幕的一侧，这是预期的默认位置。但是，我希望能够为用户提供缩小选项，以便所有列都可见。我关注了另一个关于如何执行此操作的堆栈溢出问题 here ，但它仅缩放 div 的可见部分，而不缩放其余内容。

// Set initial zoom level
var zoom_level = 100;

// Click events
$('.zoom-in').click(function() {
    zoom_page(10, $(this))
});
$('.zoom-out').click(function() {
    zoom_page(-10, $(this))
});
$('.zoom-reset').click(function() {
    zoom_page(0, $(this))
});

// Zoom function
function zoom_page(step, trigger) {
    // Zoom just to steps in or out
    if (zoom_level >= 200 && step > 0 || zoom_level <= 30 && step < 0) return;

    // Set / reset zoom
    if (step == 0) zoom_level = 100;
    else zoom_level = zoom_level + step;

    var scale = zoom_level / 100;

    // Set page zoom via CSS
    $('.board-canvas').css({
        moztransform: 'scale(scale, scale)', // Moz-browsers 
        transform: 'scale(' + (scale) + ')', // set zoom
        transformOrigin: '50% 0' // set transform scale base
    });

    // Adjust page to zoom width
    if (zoom_level > 100) $('.board-canvass').css({
        width: (zoom_level * 1.2) + '%'
    });
    else $('body').css({
        width: '100%'
    });

    // Activate / deactivate trigger (use CSS to make them look different)
    if (zoom_level >= 20 || zoom_level <= 40) trigger.addClass('disabled');
    else trigger.parents('ul').find('.disabled').removeClass('disabled');
    if (zoom_level != 100) $('#zoom_reset').removeClass('disabled');
    else $('#zoom_reset').addClass('disabled');
}

function updateLists(element, columnId) {
    //doSomething

}



$('.btn').on("click", function(event) {
    $("*").css("cursor", "progress");
});

.card {
    transition: 0.3s;
}

.portfolio-container {
   background-color: #1d3c5c;
}

.card-member-span {
    padding-right: 1em;
}

.project-dialog {
    overflow: auto;
    background-color: #1d3c5c;
}

.portfolio-dialog {
    overflow: auto;
    background-color: #ffffff;
}

.dialog {
    display: none;
}

.project-block {
    padding-left: 0.25em;
    padding-bottom: 0.25em;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    /*     -webkit-user-select: none; */
    /*     -moz-user-select: none; */
    /*     -ms-user-select: none; */
    /*     user-select: none; */
    /*     border-radius: 1em; */
}

.project-block.focus,
.project-block:focus,
.project-block:hover {
    color: #333;
}

.project-block-primary {
    color: #1d3c5c;
    background-color: #ddd;
    font-weight: 700;
}

.list-cards {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 4px;
    padding: 0 4px;
    z-index: 1;
    min-height: 0;
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.portfolio-card {
    width: 100%;
    min-height: 3em;
    background-color: #ddd;
    color: #000;
    padding-left: 3px;
}

.list-card-members {
    background-color: #ffffff;
    padding: 0.5em;
}

.list-card-section {}

.list-card-project-section {
    background-color: #ffffff;
}

.list-card {
    margin-bottom: 0.5em;
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    border-radius: 1em;
    overflow: hidden;
}

/* Add rounded corners to the top left and the top right corner of the image */

img {
    vertical-align: inherit;
}

/* On mouse-over, add a deeper shadow */

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* Add some padding inside the card container */

.container {
    padding: 2px 16px;
}

#board {
    /*     user-select: none; */
    white-space: nowrap;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* .list-header-target { */

/*     cursor: pointer; */

/*     position: absolute; */

/*     top: 0; */

/*     left: 0; */

/*     right: 0; */

/*     bottom: 0; */

/* } */

.list {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;
    margin-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
}

.board-menu-container,
.list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.list-wrapper {
    width: 270px;
    margin: 0 5px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    min-height: 600px;
}

.search-filter {
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
    font-size: 12px;
}

.search-filter-block {
    padding-top: 5px;
    padding-bottom: 5px;
}

.search-filter-tag-block {
    margin-top: 5px;
}

.search-filter-select {
    height: 100%;
    font-size: 12px;
}

.search-colour-button {
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}

.search-colour-button.active {
    box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
    font-weight: 800;
}

.project-card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 1em;
    overflow: hidden;
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    min-height: 10%;
    max-height: 90%;
    min-width: 10%;
    max-width: 90%;
    margin: 1em;
}

.project-card-content {
    /*     padding: 0.5em; */
    background-color: #fff;
}

.portfolio-card-title {
    font-weight: 600;
    padding: 0.5em;
    cursor: pointer;
}

.portfolio-projects-title {
    font-weight: 600;
}

.search-tags-form {
    margin: 4px 2px;
}

.list-header {
    color: #ddd;
}

.list-header-name-assist {
    text-shadow: 2px 2px 4px #000000;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0px;
    padding: 0;
}

.portfolio-dialog {
    background-color: #1d3c5c;
    color: #fff;
}

.portfolio-dialog-content {
    background-color: #1d3c5c;
    color: #ffffff;
}

dl {
    margin-bottom: 3px;
}

.bg-dark {
    color: #333333;
    background-color: #ffffff;
}

.portfolio-card-content {
    margin-bottom: 0.5em;
    border-radius: 1em;
    padding-top: 0.5em;
    padding-bottom: 1em;
}

.fps-tag-block {
    padding-left: 1em;
    padding-right: 1em;
}

.portfolio-icon-list {
    color: #000;
}

.ui-dialog {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
}

.ui-dialog-titlebar {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    color: #ddd;
    border: 0px;
}

.ui-dialog-buttonpane {
    background-color: #1d3c5c;
    color: #ddd;
    border: 0px;
}

.ui-dialog .ui-dialog-title {
    text-align: center;
}

.ui-dialog-buttonset {
    color: #1d3c5c;
}

.ui-dialog-titlebar-close {
    color: #1d3c5c;
    content: "X";
}

.ui-widget-content {
    /*     background-color: #1d3c5c; */
}

.ui-widget-content a {
    color: #333333;
}

.portfolio-toggle:before {
    /*     content: "\25b2"; */
    content: "▸";
}

.portfolio-toggle.collapsed:before {
    /*     content:  "\25bc"; */
    content: "▾";
}

.project-block-rounded {
    border-radius: 0.5em;
    padding: 0.25em;
    margin: 0.25em;
}

.open-portfolio-dialog-btn {
    cursor: pointer;
}

.portfolio-overview-btn {
    cursor: pointer;
}

.media-capture-btn {
    cursor: pointer;
}

#search-filter-block {
    cursor: pointer;
}

.dl-horizontal dt {
    text-align: left;
}

.dl-horizontal dd {
    width: auto;
}

.portfolio-card-filter {
    padding-left: 1em;
}

.portfolio-metadata {
    color: #000;
}

.portfolio-overview {
    color: #000;
}

.fixed-header {
    position: fixed;
    top: 0em;
    background-color: #1d3c5c;
    padding: 1em;
    width: 270px;
    text-align: center;
}

.sortable-list {
    padding-bottom: 100px;
}

.search-highlighter {
    border: 2px solid red;
}

.portfolio-specific-btn {
    padding-right: 0.5em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0px;
    padding: 0;
}

<script src="https://use.fontawesome.com/fcc45c3f3f.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" id="core-content">

    <form name="search-filter-form" method="POST" class="">
        <div class="container-fluid">
            <div class="">
                <div class="row">

                    <div class="text-center col-xs-2">
                        <i class="fa fa-search-plus zoom-in" aria-hidden="true"></i>
                        <i class="fa fa-search-minus zoom-out" aria-hidden="true"></i>
                    </div>
                    <div class="text-center col-xs-1">
                        <a href="#" class="btn btn-default btn-primary ">Reset</a>
                    </div>

                </div>
            </div>

        </div>
    </form>


    <div id="loading-msg" style="display: none;">
        <div class="row">
            <div class="spacer-sml"></div>
        </div>
        <div class="row">
            <div class="spacer-sml"></div>
        </div>
        <div class="col-xs-12 text-center">
            <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <p>Loading...</p>
        </div>

    </div>
    <div id="portfolio-container" class="container-fluid portfolio-container" style="">

        <div class="spacer-sml"></div>
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">

            <div class="board-canvas">
                <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Awaiting Approval
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">


                                <div data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">

                                    <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
              
             color: #000000; ">

                                        <div class="portfolio-card-filter-block">
                                            <div class="portfolio-card-title portfolio-card-filter-heading ">
                                                <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
                                                    <span class="portfolio-accordion"></span>

                                                    <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;

                                                    <span class="archiware-archive-state" data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span>                                                    Tennis
                                                    <span class="text-right"></span>

                                                </div>
                                            </div>
                                            
                                        </div>

                                    </div>

                                    
                                    <hr>
                                    <div class="list-card-details text-center">
                                        <div class="list-card-members js-list-card-members">
                                            <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
                                                <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
                                                    <a href="#" class="portfolio-overview">
                        <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>
                                                <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
                                                    <a href="#" class="portfolio-checklist">
                        <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>

                                                <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
                                                    <a href="#" class="portfolio-metadata">
                    <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>

                                                <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
                                                    <a href="#" class="portfolio-forum">
                        <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>

                                                </div>

                                            </div>
                                        </div>

                                        <div class="list-card-project-section">

                                            <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
                                                Motion Sports: <span class="badge">1</span>
                                            </div>

                                            <div class="dialog project-dialog project-dialog-motion" name="project-dialog-motion" id="project-dialog-motion-5ac752e61c99a112046cf391" title="Awaiting Approval Motion Sports">

                                                <div class="project-card">
                                                    <div class="project-card-content">

                                                        <div class="fps-tag-block fps-tag-Motion">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Storyline:</dt>
                                                                <dd>Motion</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Comment:</dt>
                                                                <dd></dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-1">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Version:</dt>
                                                                <dd>1</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-createddate">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Created:</dt>
                                                                <dd>6-4-2018</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-inprogress">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Status:</dt>
                                                                <dd>In Progress</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-{day=11, month=4, year=2018}">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Completed Date:</dt>
                                                                <dd>11-4-2018</dd>
                                                            </dl>
                                                        </div>

                                                    </div>
                                                </div>

                                            </div>

                                            

                                            
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Approved
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Editing in Progress
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Awaiting Graphics
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Ready for Dubbing
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="readydubbing" data-column-value="readydubbing Ready for Dubbing">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Ready for Grading
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="readygrading" data-column-value="readygrading Ready for Grading">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Completed
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Not Approved -Do Not Distribute
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="notapproved" data-column-value="notapproved Not Approved -Do Not Distribute">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="spacer-sml"></div>

        </form>

    </div>

</div>

正如您所看到的，div 缩放但仅缩放到默认显示内容的级别。我希望能够足够缩小，以便滚动条消失。我做错了什么？

Answer 1

如果您只是尝试启用基本的缩放效果，一旦所有元素变得可见，就会导致滚动行为发生变化，那么我认为您只需将转换应用于可滚动元素内的包装元素。

在下面的代码片段中，我刚刚在您的#board div 中添加了一个新的#zoom-wrapper div > 并更新了您的 zoom_page 函数来转换 #zoom-wrapper (我还设置了 transform-origin: 0 0 以便您可以看到缩放更容易消除滚动 - 不确定您是否对如何尝试重置原点还有其他想法)。

希望这能为您指明正确的方向。

// Set initial zoom level
var zoom_level = 100;

// Click events
$('.zoom-in').click(function() {
    zoom_page(10, $(this))
});
$('.zoom-out').click(function() {
    zoom_page(-10, $(this))
});
$('.zoom-reset').click(function() {
    zoom_page(0, $(this))
});

// Zoom function
function zoom_page(step, trigger) {
    // Zoom just to steps in or out
    if (zoom_level >= 200 && step > 0 || zoom_level <= 30 && step < 0) return;

    // Set / reset zoom
    if (step == 0) zoom_level = 100;
    else zoom_level = zoom_level + step;

    var scale = zoom_level / 100;

    // Set page zoom via CSS
    $('#zoom-wrapper').css({
        'transform': 'scale(' + (scale) + ')', // set zoom
        'transform-origin': '0 0'
    });

    // Adjust page to zoom width
    if (zoom_level > 100) $('#zoom-wrapper').css({
        width: (zoom_level * 1.2) + '%'
    });
    else $('body').css({
        width: '100%'
    });

    // Activate / deactivate trigger (use CSS to make them look different)
    if (zoom_level >= 20 || zoom_level <= 40) trigger.addClass('disabled');
    else trigger.parents('ul').find('.disabled').removeClass('disabled');
    if (zoom_level != 100) $('#zoom_reset').removeClass('disabled');
    else $('#zoom_reset').addClass('disabled');
}

function updateLists(element, columnId) {
    //doSomething

}



$('.btn').on("click", function(event) {
    $("*").css("cursor", "progress");
});

.card {
    transition: 0.3s;
}

.portfolio-container {
   background-color: #1d3c5c;
}

.card-member-span {
    padding-right: 1em;
}

.project-dialog {
    overflow: auto;
    background-color: #1d3c5c;
}

.portfolio-dialog {
    overflow: auto;
    background-color: #ffffff;
}

.dialog {
    display: none;
}

.project-block {
    padding-left: 0.25em;
    padding-bottom: 0.25em;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    /*     -webkit-user-select: none; */
    /*     -moz-user-select: none; */
    /*     -ms-user-select: none; */
    /*     user-select: none; */
    /*     border-radius: 1em; */
}

.project-block.focus,
.project-block:focus,
.project-block:hover {
    color: #333;
}

.project-block-primary {
    color: #1d3c5c;
    background-color: #ddd;
    font-weight: 700;
}

.list-cards {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 4px;
    padding: 0 4px;
    z-index: 1;
    min-height: 0;
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.portfolio-card {
    width: 100%;
    min-height: 3em;
    background-color: #ddd;
    color: #000;
    padding-left: 3px;
}

.list-card-members {
    background-color: #ffffff;
    padding: 0.5em;
}

.list-card-section {}

.list-card-project-section {
    background-color: #ffffff;
}

.list-card {
    margin-bottom: 0.5em;
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    border-radius: 1em;
    overflow: hidden;
}

/* Add rounded corners to the top left and the top right corner of the image */

img {
    vertical-align: inherit;
}

/* On mouse-over, add a deeper shadow */

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* Add some padding inside the card container */

.container {
    padding: 2px 16px;
}

#board {
    /*     user-select: none; */
    white-space: nowrap;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* .list-header-target { */

/*     cursor: pointer; */

/*     position: absolute; */

/*     top: 0; */

/*     left: 0; */

/*     right: 0; */

/*     bottom: 0; */

/* } */

.list {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;
    margin-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
}

.board-menu-container,
.list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.list-wrapper {
    width: 270px;
    margin: 0 5px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    min-height: 600px;
}

.search-filter {
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
    font-size: 12px;
}

.search-filter-block {
    padding-top: 5px;
    padding-bottom: 5px;
}

.search-filter-tag-block {
    margin-top: 5px;
}

.search-filter-select {
    height: 100%;
    font-size: 12px;
}

.search-colour-button {
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}

.search-colour-button.active {
    box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6;
    font-weight: 800;
}

.project-card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 1em;
    overflow: hidden;
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    min-height: 10%;
    max-height: 90%;
    min-width: 10%;
    max-width: 90%;
    margin: 1em;
}

.project-card-content {
    /*     padding: 0.5em; */
    background-color: #fff;
}

.portfolio-card-title {
    font-weight: 600;
    padding: 0.5em;
    cursor: pointer;
}

.portfolio-projects-title {
    font-weight: 600;
}

.search-tags-form {
    margin: 4px 2px;
}

.list-header {
    color: #ddd;
}

.list-header-name-assist {
    text-shadow: 2px 2px 4px #000000;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0px;
    padding: 0;
}

.portfolio-dialog {
    background-color: #1d3c5c;
    color: #fff;
}

.portfolio-dialog-content {
    background-color: #1d3c5c;
    color: #ffffff;
}

dl {
    margin-bottom: 3px;
}

.bg-dark {
    color: #333333;
    background-color: #ffffff;
}

.portfolio-card-content {
    margin-bottom: 0.5em;
    border-radius: 1em;
    padding-top: 0.5em;
    padding-bottom: 1em;
}

.fps-tag-block {
    padding-left: 1em;
    padding-right: 1em;
}

.portfolio-icon-list {
    color: #000;
}

.ui-dialog {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
}

.ui-dialog-titlebar {
    /*  background-color: #5b5353; */
    background-color: #1d3c5c;
    color: #ddd;
    border: 0px;
}

.ui-dialog-buttonpane {
    background-color: #1d3c5c;
    color: #ddd;
    border: 0px;
}

.ui-dialog .ui-dialog-title {
    text-align: center;
}

.ui-dialog-buttonset {
    color: #1d3c5c;
}

.ui-dialog-titlebar-close {
    color: #1d3c5c;
    content: "X";
}

.ui-widget-content {
    /*     background-color: #1d3c5c; */
}

.ui-widget-content a {
    color: #333333;
}

.portfolio-toggle:before {
    /*     content: "\25b2"; */
    content: "▸";
}

.portfolio-toggle.collapsed:before {
    /*     content:  "\25bc"; */
    content: "▾";
}

.project-block-rounded {
    border-radius: 0.5em;
    padding: 0.25em;
    margin: 0.25em;
}

.open-portfolio-dialog-btn {
    cursor: pointer;
}

.portfolio-overview-btn {
    cursor: pointer;
}

.media-capture-btn {
    cursor: pointer;
}

#search-filter-block {
    cursor: pointer;
}

.dl-horizontal dt {
    text-align: left;
}

.dl-horizontal dd {
    width: auto;
}

.portfolio-card-filter {
    padding-left: 1em;
}

.portfolio-metadata {
    color: #000;
}

.portfolio-overview {
    color: #000;
}

.fixed-header {
    position: fixed;
    top: 0em;
    background-color: #1d3c5c;
    padding: 1em;
    width: 270px;
    text-align: center;
}

.sortable-list {
    padding-bottom: 100px;
}

.search-highlighter {
    border: 2px solid red;
}

.portfolio-specific-btn {
    padding-right: 0.5em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0px;
    padding: 0;
}

<script src="https://use.fontawesome.com/fcc45c3f3f.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" id="core-content">

    <form name="search-filter-form" method="POST" class="">
        <div class="container-fluid">
            <div class="">
                <div class="row">

                    <div class="text-center col-xs-2">
                        <i class="fa fa-search-plus zoom-in" aria-hidden="true"></i>
                        <i class="fa fa-search-minus zoom-out" aria-hidden="true"></i>
                    </div>
                    <div class="text-center col-xs-1">
                        <a href="#" class="btn btn-default btn-primary ">Reset</a>
                    </div>

                </div>
            </div>

        </div>
    </form>


    <div id="loading-msg" style="display: none;">
        <div class="row">
            <div class="spacer-sml"></div>
        </div>
        <div class="row">
            <div class="spacer-sml"></div>
        </div>
        <div class="col-xs-12 text-center">
            <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <p>Loading...</p>
        </div>

    </div>
    <div id="portfolio-container" class="container-fluid portfolio-container" style="">

        <div class="spacer-sml"></div>
        <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class="">

            <div class="board-canvas">
                <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
                  <div id="zoom-wrapper">
                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Awaiting Approval
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval">


                                <div data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle">

                                    <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f;
              
             color: #000000; ">

                                        <div class="portfolio-card-filter-block">
                                            <div class="portfolio-card-title portfolio-card-filter-heading ">
                                                <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false">
                                                    <span class="portfolio-accordion"></span>

                                                    <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp;

                                                    <span class="archiware-archive-state" data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span>                                                    Tennis
                                                    <span class="text-right"></span>

                                                </div>
                                            </div>
                                            
                                        </div>

                                    </div>

                                    
                                    <hr>
                                    <div class="list-card-details text-center">
                                        <div class="list-card-members js-list-card-members">
                                            <div class="portfolio-icon-list " data-example-id="portfolio-icon-list">
                                                <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview">
                                                    <a href="#" class="portfolio-overview">
                        <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>
                                                <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist">
                                                    <a href="#" class="portfolio-checklist">
                        <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>

                                                <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata">
                                                    <a href="#" class="portfolio-metadata">
                    <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a>
                                                </div>

                                                <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum">
                                                    <a href="#" class="portfolio-forum">
                        <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a>

                                                </div>

                                            </div>
                                        </div>

                                        <div class="list-card-project-section">

                                            <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391">
                                                Motion Sports: <span class="badge">1</span>
                                            </div>

                                            <div class="dialog project-dialog project-dialog-motion" name="project-dialog-motion" id="project-dialog-motion-5ac752e61c99a112046cf391" title="Awaiting Approval Motion Sports">

                                                <div class="project-card">
                                                    <div class="project-card-content">

                                                        <div class="fps-tag-block fps-tag-Motion">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Storyline:</dt>
                                                                <dd>Motion</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Comment:</dt>
                                                                <dd></dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-1">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Version:</dt>
                                                                <dd>1</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-createddate">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Created:</dt>
                                                                <dd>6-4-2018</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-inprogress">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Status:</dt>
                                                                <dd>In Progress</dd>
                                                            </dl>
                                                        </div>

                                                        <div class="fps-tag-block fps-tag-{day=11, month=4, year=2018}">
                                                            <dl class="dl-horizontal">
                                                                <dt class="text-left">Completed Date:</dt>
                                                                <dd>11-4-2018</dd>
                                                            </dl>
                                                        </div>

                                                    </div>
                                                </div>

                                            </div>

                                            

                                            
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Approved
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Editing in Progress
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Awaiting Graphics
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Ready for Dubbing
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="readydubbing" data-column-value="readydubbing Ready for Dubbing">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Ready for Grading
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="readygrading" data-column-value="readygrading Ready for Grading">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Completed
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="js-list list-wrapper ">
                        <div class="list js-list-content">
                            <div class="list-header js-list-header u-clearfix is-menu-shown">
                                <div class="list-header-target js-editing-target"></div>
                                <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto">
                                    Not Approved -Do Not Distribute
                                </h4>
                            </div>
                            <div class="sortable-list ui-sortable" data-column-id="notapproved" data-column-value="notapproved Not Approved -Do Not Distribute">

                                <div class="ui-sortable-handle">

                                </div>

                            </div>
                        </div>
                    </div>

                </div>
              </div>
            </div>
            <div class="spacer-sml"></div>

        </form>

    </div>

</div>