Bootstrap Card Render Problem in Google Chrome

Hello I tried to populate Bootstrap cards in a JSP file, but there is this rendering issue with chrome, where card becomes invisible. It works fine in firefox. I have tried inspecting the elements, it was fine. But when I try to scroll down, the card vanishes. Please help me how to resolve this issue.

Here is the Psuedo Code for HTML.

 <head>
    <script 
     src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" 
     crossorigin="anonymous"></script>
 </head>
 <div class="main-cards" id="reports">
           <%
            for(int i=0;i<10;i++){
               %> 
  <div class="card">
      <div class="card-title">ABC</div>
         <div class="card-title">XYZ</div>
     <script>
                    var chart={
                        pass:"10",
                        failed:"4",
                        blocked:"0",
                        skipped:"0",
                        notCompleted:"0",
                        total:"14"
                    }
                </script>

                <canvas id="<%=i%>" style="height: 180px"></canvas>
                <script>lineCharts(chart,"<%=i%>");</script>
           <div class="form-row mb-4">
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="details"  onclick="window.open('SomeServlet?','details','width=800,height=800')">Details Report</button>
                    </div>
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="stability"  onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability Report</button>
                    </div>
                </div>
           </div>
           <%
        }
        %>
         </div>

JavaScript
​x
 
 <head>
    <script 
     src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" 
     crossorigin="anonymous"></script>
 </head>
 <div class="main-cards" id="reports">
           <%
            for(int i=0;i<10;i++){
               %> 
  <div class="card">
      <div class="card-title">ABC</div>
         <div class="card-title">XYZ</div>
     <script>
                    var chart={
                        pass:"10",
                        failed:"4",
                        blocked:"0",
                        skipped:"0",
                        notCompleted:"0",
                        total:"14"
                    }
                </script>
​
                <canvas id="<%=i%>" style="height: 180px"></canvas>
                <script>lineCharts(chart,"<%=i%>");</script>
           <div class="form-row mb-4">
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="details"  onclick="window.open('SomeServlet?','details','width=800,height=800')">Details Report</button>
                    </div>
                    <div class="col">
                <button class="btn" style="background-color: #3e62bd;color: white"  name="stability"  onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability Report</button>
                    </div>
                </div>
           </div>
           <%
        }
        %>
         </div>
​

and the CSS

.main-cards {
column-count: 3;
column-gap: 20px;
margin: 40px;
align-items: center;
display: block;
overflow-x: hidden;
 }
  .card {
display: flex;
flex-direction: column;
align-items: center;
width: 380px;
height: 500px;
background-color: white;
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
padding: 24px;
box-sizing: border-box;
overflow-x: hidden;
}

JavaScript
 
.main-cards {
column-count: 3;
column-gap: 20px;
margin: 40px;
align-items: center;
display: block;
overflow-x: hidden;
 }
  .card {
display: flex;
flex-direction: column;
align-items: center;
width: 380px;
height: 500px;
background-color: white;
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
padding: 24px;
box-sizing: border-box;
overflow-x: hidden;
}
​

JS file:

function lineCharts(chart,id){

var pass = chart.pass;
var fail = chart.failed;
var blocked = chart.blocked;
var NotCompleted = chart.notCompleted;
var total = chart.total;
var skipped = chart.skipped;

var legend = [];
var TestData = [];
var background = [];

if(total>=0){
    legend.push("Total");
    TestData.push(total);
    background.push("#05a2f7");

}
if(pass>=0){
    legend.push("Pass");
    TestData.push(pass);
    background.push("#70d660");

}

if(fail>=0){
    legend.push("Failed");
    TestData.push(fail);
    background.push("#FF5A5E");

}
if(skipped>=0){
    legend.push("Skipped");
    TestData.push(skipped);
    background.push("#bf77d6");

}
if(blocked>0){
    legend.push("Blocked");
    TestData.push(blocked);
    background.push("#f2ca6d");
}

if(NotCompleted>0){
    legend.push("Not Completed");
    TestData.push(NotCompleted);
    background.push("#D3D3D3");
}
var ctxL = document.getElementById(id).getContext('2d');
var myBarChart = new Chart(ctxL, {
    "type": "horizontalBar",
    "data": {
        "labels": legend,
        "datasets": [{
            "label": "Pass Fail Details",
            "data": TestData,
            "fill": false,
            "backgroundColor": background,
            "borderColor": background,
            "borderWidth": 1
        }]
    },
    "options": {
        "scales": {
            "xAxes": [{
                "ticks": {
                    "beginAtZero": true
                }
            }]
        }
    }
});
myBarChart.update();

JavaScript
 
function lineCharts(chart,id){
​
var pass = chart.pass;
var fail = chart.failed;
var blocked = chart.blocked;
var NotCompleted = chart.notCompleted;
var total = chart.total;
var skipped = chart.skipped;
​
var legend = [];
var TestData = [];
var background = [];
​
if(total>=0){
    legend.push("Total");
    TestData.push(total);
    background.push("#05a2f7");
​
}
if(pass>=0){
    legend.push("Pass");
    TestData.push(pass);
    background.push("#70d660");
​
}
​
if(fail>=0){
    legend.push("Failed");
    TestData.push(fail);
    background.push("#FF5A5E");
​
}
if(skipped>=0){
    legend.push("Skipped");
    TestData.push(skipped);
    background.push("#bf77d6");
​
}
if(blocked>0){
    legend.push("Blocked");
    TestData.push(blocked);
    background.push("#f2ca6d");
}
​
if(NotCompleted>0){
    legend.push("Not Completed");
    TestData.push(NotCompleted);
    background.push("#D3D3D3");
}
var ctxL = document.getElementById(id).getContext('2d');
var myBarChart = new Chart(ctxL, {
    "type": "horizontalBar",
    "data": {
        "labels": legend,
        "datasets": [{
            "label": "Pass Fail Details",
            "data": TestData,
            "fill": false,
            "backgroundColor": background,
            "borderColor": background,
            "borderWidth": 1
        }]
    },
    "options": {
        "scales": {
            "xAxes": [{
                "ticks": {
                    "beginAtZero": true
                }
            }]
        }
    }
});
myBarChart.update();
​

}

Answer

Resolved the issue. Was using different stylesheet of bootstrap before version:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">

JavaScript
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
​

and changed to

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

JavaScript
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
​

Now rendering issue is gone and shows correct result.

Advertisement

Answer