MichaelE MichaelE - 3 months ago 18
CSS Question

Bootstrap override not taking effect

I am trying to override a bootstrap class using JavaScript. The problem is that value of display is changed by the Javascript code but the HTML rows aren't displayed. If I use !important in the style block in

custom.css
bootstrap is overridden and the JavaScript assignment is still the HTML rows aren't displayed....can anyone tell me whats wrong here. I did try using an ID then chaining the elements
(#id.class)
that didn't work either. (the code works fine without bootstrap)

custom css

body {
margin-top:30px;
}
.hidden
{
display: none;
}


HTML

<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script> src="js/bootstrap.min.js"</script>


</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">

<table class="hidden table table-striped table-border">

<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>

<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>

</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>

</body>
<script type="text/javascript">

var count=4;

var activerows=document.getElementsByClassName("hidden");

if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.display="block";
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
</script>
</html>

Answer

If Bootstrap is the main culprit then don't use its class and simply use your custom class hideme or something and then override it using Javascript like I have done in this snippet below:

var count = 4;

var activerows = document.getElementsByClassName("hideme"),
    tablehasClass = document.getElementById("table").classList;

if (count <= activerows.length) {
  tablehasClass.remove("hideme");
  for (var i = 0; i < count; i++) {
    activerows[i].style.display = "table-row";
  }
} else {
  for (var i = 0; i < activerows.length; i++) {
    //  activerows[i].style.display='';
  }
}
body {
  margin-top: 30px;
}
.hideme {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/custom.css">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">

        <table id="table" class="hideme table table-striped table-border">

          <tbody>
            <tr class="hideme">
              <td>List ............</td>
            </tr>

            <tr class="hideme active">
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
            </tr>
            <tr class="hideme">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
            </tr>
            <tr class="hideme">
              <td>5</td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
            </tr>
            <tr class="hideme">
              <td>9</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
            </tr>
            <tr class="hideme">
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td>16</td>
            </tr>
            <tr class="hideme">
              <td>17</td>
              <td>18</td>
              <td>19</td>
              <td>20</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <div class="well col-md-8">
      <p>Test Messages.........</p>
    </div>
  </div>

</body>

</html>

table is very keen of its elements so never use display: block us display: table-row for tr, display: table-cell for td and similarly display: table for table