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

Question

>我创建了一个包含各种列的页面。 这些列可能最终离开屏幕的一侧，这是预期的默认位置。 但是，我希望能够为用户提供缩小的选项，以便所有列都可见。 我在这里关注了另一个关于如何执行此操作的堆栈溢出问题，但它只缩放了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

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

在下面的代码片段中，我刚刚在您的#boarddiv中添加了一个新#zoom-wrapperdiv，并更新了您的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>

Answer 2

在容器流体上应用转换 css

$('.container-fluid').css({
moztransform: 'scale(scale, scale)', // Moz-browsers 
transform: 'scale(' + (scale) + ')', // set zoom
transformOrigin: '50% 0' // set transform scale base
});

// 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
$('.container-fluid').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; */
display: flex;
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>