My website is running well with chrome but not in IE 11.It display warning.required Cross Origin Resource Sharing (CORS).All the alignment are breaking. Not looking good.
chrom screen sort
IE 11 screensort 
How can I resolve the problem. I am getting required Cross Origin Resource Sharing (CORS) on IE 11.How can I resolve this.I am using Angular2 Please help me here is my code.
details.html
<div class="content-area">
<div class="container-fluid flex-row scrollPage">
<div class="details">
<div class="brand-prop">
<div class="title">Input</div>
<div class="brand-detail">
<!-- Audit First row start-->
<div class="detail-sec" >
<h3 class="m-heading bg-color">Input files</h3>
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">-->
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient]" (click)="onDrillDown(tabs = ['Expected', 'Received'])">-->
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">
<!--<a (click)="onDrillDown('Expected')">-->
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Expected</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.expected}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Received</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.received}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart barChart"></div>
</div>
</div>
</div>
</a>
</div>
<!--Audit First row end -->
<!---My Non Parcel -->
<div class="detail-sec">
<h3 class="m-heading">New billings</h3>
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Parcel','Non Parcel']" (click)="drillDowns('Expected')">
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.parcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="parcelSparkId" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Non Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.nonParcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="nonParcelSparkId" class="chart barChart"></div>
</div>
</div>
</div>
</a>
<div class="flex-row input-align">
<div class="flex-col-left">
<div class="number-cont">
<h4>Electronic</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.electronic}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartElectronic" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Manual</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.manual}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartManual" class="chart barChart"></div>
</div>
</div>
</div>
</div>
<div class="extra-space"></div>
<div class="detail-sec">
<div class="errors-wpr">
<div class="err-title">
<h4>ERRORS</h4>
<a (click)="navigateTo(0)">View All</a>
</div>
<div class="err-content">
<ul>
<li class="error" *ngFor="let input of inputData | limitFirstN:limit; let i = index" [routerLink]="['/dashboard', 'errors', activeClient]" (click)="navigateTo(i,activeClient)">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="ellipsis">
{{input?.taskName }}
</span>
</li>
<!--<li (click)="navigateTo(0)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </li>
<li (click)="navigateTo(1)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>
<li (click)="navigateTo(2)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>-->
</ul>
</div>
</div>
</div>
</div>
</div><!--- /In Progress --->
</div>
</div>
details.css
.main-container{
padding: 0px;
}
.top-items-list{
padding-left: 20px;
float: left;
max-width: calc(100% - 20px);
margin-bottom: 30px;
}
.top-items-list > .logo
{
padding-top: 10px;
float: left;
width: 10%;
}
.top-items-list .data-list {
float: left;
}
.top-items-list .data-list .item {
float: left;
border-right: thin solid #DDDDDD;
position: relative;
min-width: 160px;
}
.top-items-list .data-list .item:last-child {
border-right: none;
}
.top-items-list .data-list .item .input {
font-size: 24px;
}
.top-items-list .data-list .item .input span {
font-size: 15px;
color: #878787;
}
.top-items-list .data-list .item .count {
background-color: #ee242c;
border-radius: 18px;
color: #fff !important;
float: right;
font-size: 11px !important;
height: 22px;
line-height: 22px;
text-align: center;
width: 22px;
display: block;
padding-bottom: 5px;
position: absolute;
right: 10px;
}
.content-area{ padding-top:20px;}
.content-area-full .container{ width:100%;}
.content{background-color:#fff; border-radius:3px; display:table; width:100%;}
.content-part, .more-popup{ display:table-cell; vertical-align:top;}
.details {
display: flex;
}
.brand-prop {
color:#000;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.brand-prop .title{ font-size:24px; margin-bottom:20px; font-weight:300; }
.brand-prop .subheading{
font-size:13px;
font-weight:600;
}
.brand-prop .brand-detail {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
border-radius: 3px;
flex: 1;
display: flex;
flex-direction: column;
}
.detail-sec strong{
color:#888888;
font-weight: 400;
border-bottom: 1px solid #ddd;
}
.brand-prop .detail-sec{ padding:20px; border-bottom:1px solid #DDD; line-height:22px;}
.brand-prop .detail-sec:first-child{ padding-top:20px;}
.brand-prop .detail-sec .row{ margin-bottom:20px;}
.brand-prop .detail-sec .row:last-child{ margin-bottom: 0;}
.brand-prop .detail-sec {
color:#333;
padding-top:10px;
font-weight: 400;
&:first-child {
padding-top: 20px;
}
&.no-border {
border-bottom: none;
}
> span {
color:#333;
display:block;
}
.dollar {
font-size: 20px;
color: #999;
vertical-align: baseline;
}
span.label {
font-size: 25px;
display: inline-block;
font-weight: 400;
color:#333;
padding-left: 2px;
padding: 0;
}
}
.brand-prop .detail-sec span.viewall {
font-size: 13px;
float: right;
margin-top: -12px;
> a {
color: #87C328;
}
}
// .brand-prop .detail-sec li {
// background:url(../image2/error-list.png) left 5px no-repeat;
// background-size: 18px;
// padding-left:30px;
// padding-bottom:10px;
// font-size: 13px;
// font-family: "Open Sans", sans-serif;
// }
.extra-space {
flex: 1;
}
.extra-space + .detail-sec {
border-top: 1px solid #ddd;
}
.errors-wpr {
.err-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
h4 {
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
> a {
color: #87C328;
font-weight: 600;
align-self: center;
font-size: 12px;
&:hover {
cursor: pointer;
}
}
}
}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9; font-weight:600;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.item.active-tab {
background-color:#eeeeee;
padding-bottom: 20px;
height: 63px;
position: absolute;
z-index: 100;
}
.data-list {
// max-width: 97%;
ul {
display: flex;
overflow-x: hidden;
flex-direction: row;
li {
flex: 1 1 100px;
}
}
}
.item {
background-color: #eeeeee;
display: table;
cursor: pointer;
height: 70px;
> div {
display: table-cell;
}
>.itm-wpr {
padding: 10px 20px;
background-color: #fff;
transition: display 0.9s;
img {
max-height: 16px;
}
}
>.logo {
display: none;
}
&.active {
box-shadow: none;
background-color: #eeeeee;
display: block;
>.itm-wpr {
display: none;
}
>.logo {
text-align: center;
padding: 10px 0;
display: block;
height: 100%;
img {
max-width: 150px;
}
}
}
}
/*.hover-this:hover + .graph-show-image{ display:block;}*/
.graph-show-image {
display: none;
position: absolute;
z-index: 99999; cursor:pointer;
width:100%; left:0;
}
.graph-show-image img{ width:100%;}
.screen2, .screen3{ display:none;}
.select-action, .select-action label{ float:left;}
.select-action label{ line-height:35px; margin-right:10px; font-weight:400;}
.select-action .select-style, .select-action .select-style select{ float:left; height:35px; line-height:35px; margin-bottom:0;}
.select-action .select-style select{ padding-right:20px;}
.section-details .actions{ background-color:#fff; padding:20px;}
/* reports popup */
.steps {
display: table;
width: 100%; margin:30px 0; font-weight:500;
}
.step {
display: inline-block;
text-align: center;
width: 50%; position:relative; z-index:1; float:left;
}
.step span:after {
content: "";
position: absolute; left:0;
height: 1px;
border-bottom: 1px solid #ccc;
top: 27%;
width: 100%; z-index:-1;
}
.step > span {
background-color: #ccc;
border-radius: 50%;
display: table;
font-weight: 400;
height: 30px;
line-height: 30px;
margin: 0 auto;
width: 30px;
}
.step > span.active{ background-color:#8FC058;}
.grid-table th{ padding:0;}
.grid-table th .btn{ border:0 none; min-width:0;}
.grid-table th .btn:hover{ border:0 none;}
.grid-table th .dropdown-popup{ min-width:170px;}
.grid-table th .list-items li:hover ul { display:block;}
.grid-table th .list-items ul {
background-color: #fff;
border: 1px solid #ccc;
left: 100%;
min-width: 150px;
position: absolute;
margin-top:-40px;
display:none;
}
.grid-table th.last .dropdown-popup{ margin-left:-14px;}
.grid-table th.last .list-items ul{ right:100%; left:inherit;}
#example th {
padding: 5px 10px;
}
.add-list-items .table-cell {
border: 1px solid #cccccc;
padding: 0 !important;
vertical-align: top;
width: 45% !important;
}
.add-list-items .table-cell:nth-child(2) {
border: 0 none;
width: 10% !important;
}
.add-list-items h4 {
background-color: #dfe2e7;
color: #00447f;
font-size: 14px;
font-weight: 400;
padding: 5px 10px; text-transform:uppercase;
}
.search-list {
position: relative;
}
.add-list-container{ height:210px; margin-bottom:0 !important;}
.list-options {
height: 145px;
overflow-y: scroll;
}
.add-list-items .table-cell:last-child .list-options {
height: 180px;
}
.add-remove-items{vertical-align:middle !important; text-align:center;}
.add-remove-items img{ cursor:pointer;}
.search-list > input[type="text"] {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #cccccc;
border-image: none;
border-style: none none solid;
border-width: 0 0 1px;
}
.search-list > input[type="submit"] {
background: url(../images/search-icon.png) no-repeat 0 0;
border: 0 none;
height: 20px;
position: absolute;
right: 20px;
text-indent: -5000px;
top: 6px;
width: 20px;
}
.list-options li {
padding: 5px 10px; cursor:pointer;
}
.list-options li:hover, .list-options li.selected {
background-color:#EBF1F1;
}
.pager li:first-child > a, .pager li:first-child > span {
border-left: 1px solid #ddd;
}
.pager li > a:hover, .pager li > a:focus{ background-color:#fff;}
.pager li > a, .pager li > span{ border-radius:0;}
.pager{ text-align:right;}
.container-fluid{ max-width:98%;}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.row-eq-height {
display: flex;
padding: 0 10px;
margin-bottom: 30px;
}
.detail-sec {
.m-heading {
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
line-height: 22px;
text-transform: uppercase;
}
}
.flex-row {
display: flex;
justify-content: space-between;
.subheading {
margin-bottom: 20px;
}
h4 {
color: #888888;
font-weight: 400;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 10px;
}
span {
font-size: 25px;
font-weight: 400;
color: #333;
}
.flex-col {
flex: 1 1 100px;
}
}
.flex-col-left,
.flex-col-right {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-basis: 40%;
> .flex-col {
flex: 1 1 50%;
.dollar {
height: 18px;
line-height: 18px;
font-weight: 400;
font-size: 12.6px;
display: inline-block;
}
&:first-child {
padding-right: 10px;
}
}
}
div.detail-sec .flex-row .lblSec {
// background-color:green;
padding-left:50px;
// width:60px;
}
.content-area {
margin-bottom: 50px;
}
.v-spacer {
width: 15px;
}
.flex-col-left, .flex-col-right {
display: flex;
flex-direction: column;
flex: 1 1;
.number-cont {
margin-bottom: 5px;
}
.chart-cont {
// text-align: center;
.chart {
padding: 20px 0px 0;
}
}
}
.chart-cont {
.chart {
// background-color: #dde6e9;
}
}
.item.active {
.logo {
display: flex;
justify-content: center;
align-items: center;
.lbl {
font-size: 18px;
}
}
}
///////////////////////////////////////////////////////////////////////////
// =========================== Task menu navigation ==================== //
///////////////////////////////////////////////////////////////////////////
$tasknav__height: 70px;
.task-nav-wpr {
width: 100%;
height: $tasknav__height;
// border: 1px solid red;
position: relative;
overflow: hidden;
&__pre, &__next {
width: 30px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: $tasknav__height;
opacity: 1;
z-index: 100;
transition: all .3s ease;
&:hover {
border: 1px solid #ddd;
background-color: darken(#fff, 10%);
opacity: 1;
}
}
&__pre {
top: 0;
left: 0;
}
&__next {
top: 0;
right: 0;
}
}
.task-nav {
box-sizing: border-box;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
display: block;
padding: 0;
transition: all .3s ease-in-out;
&__item {
box-sizing: border-box;
width: 160px;
margin: 0;
height: 68px;
display: inline-block;
position: relative;
cursor: pointer;
}
}
////////////////////////////////////////////////////////////
// ===================== card =========================== //
////////////////////////////////////////////////////////////
.front {
display: flex;
flex-direction: column;
> * {
flex: 1;
}
}
.front-r1 {
position: relative;
display: block;
&__cc {
font-size: 18px;
padding: 5px 0 5px 15px;
}
&__ec {
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 12px;
background-color: red;
color: #fff;
}
}
.front-r2 {
position: relative;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
height: 35px;
&__cc {
font-size: 20px;
}
&__ic {
color: lighten(#000, 10%);
}
}
.back {
display: none;
justify-content: center;
align-items: center;
&__cc {
font-size: 25px;
}
}
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform .3s ease-in-out;
// box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.card.flipped {
border-bottom: none;
box-shadow: none;
.front {
display: none;
}
.back {
display: flex;
}
}
.card figure {
// display: block;
height: 100%;
width: 100%;
color: white;
position: absolute;
margin: 0;
// backface-visibility: hidden;
}
.card .front {
color: black;
}
.card .back {
background: #eee;
color: lighten(#000, 10%);
// transform: rotateY( 180deg );
}
// $lines-to-show:2;
// .errors-wpr {
// text-overflow:ellipsis;
// overflow: auto;
// display: block;
// }
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 2;
.errors-wpr {
display: block;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height:230px;
position:relative;
min-width:100%;
//width: 370px;
width:27em;
.ellipsis{
display: inline-block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
vertical-align: bottom;
//width:33%;
width:27em;
}
}
.jqstooltip{
box-sizing: content-box;
// z-index:1;
// width:70px;
// height:25px!important;
}
.content-area {
position:relative;
top:130px;
padding-top:50px;
}
.fixed1 {
//padding-top: 20px;
display: flex;
top: 75px;
background-color: #eee;
width: 100%;
position:fixed;
}
// .scrollPage {
// max-height:calc(100vh - 111px);
// overflow-y: auto;
// }
.flex-col-right {
padding-left:14%;
}
.error {
i.fa-exclamation-triangle {
color: #f0ad4e;
}
}
.detail-sec .input-align {
margin-top:60px;
}
// .firsttab{
// margin-left:20px;
// }
