1

Bootstrap The drop button does not drop

 2 years ago
source link: https://www.codesd.com/item/bootstrap-the-drop-button-does-not-drop.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Bootstrap The drop button does not drop

advertisements

So I added a drop down button at the end of my table, and for some reason when I click on it, nothing drops down. I see no errors on my console either. Is there something in my CSS that could be preventing it from working?

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="public/stylesheets/grayscale.css">
  <title>tech</title>
</head>

<body>
<div id="Tech" class="header">
  <center><img src="public/images/test.png" id='Logo' alt="Logo">
  </center>
</div>

<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<fieldset>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
    <div id="filedrag">
        <img src="public/images/upload3.png" alt="draganddrop">
    </div>
    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
</div>
</fieldset>
</form>

<div id="messages">
</div>

<table id="data-table" class="container">
  <thead>
    <tr>
      <th>
        <h3>Video</h3>
      </th>
      <th>
        <h3>Original Size</h3>
      </th>
      <th>
        <h3>Compressed Size</h3>
      </th>
      <th>
        <h3>Compressed rate</h3>
      </th>
      <th>
        <h3>Savings</h3>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Video1 File Name</td>
      <td>Original File Size</td>
      <td>6369</td>
      <td>01:32:50</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Video 2 File Name</td>
      <td>Original File Size</td>
      <td>10437</td>
      <td>00:51:22</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Video 3 File Name</td>
      <td>Original File Size</td>
      <td>5327</td>
      <td>00:24:34</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

</body>
<script src="public/js/filedrag.js"></script>
</html>

CSS Code:

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.42em;
  color:#A7A1AE;
  background-color:#1F2739;
}

.data-table{
    margin-top: 250px;
}

#filedrag{
    text-align: center;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover{
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

#title{
    text-align: center;
}

#logo{
    float: right;
}

.header img {
    float:left;
    border: 5px;
    padding:5px;
    width: 4em;
    height: 4em;
    border-radius: 10px;
}

.header h1 {
  position:relative;
  font-size:3em;
  font-weight: 300;
  line-height:1em;
  text-align: left;
  color: #FFFFFF;
}

h1 {
  font-size:3em;
  font-weight: 300;
  line-height:1em;
  text-align: center;
  color: #FFFFFF;
}

h2 {
  font-size:1em;
  font-weight: 300;
  text-align: center;
  display: block;
  line-height:1em;
  padding-bottom: 2em;
  color: #FB667A;
}

h2 a {
  font-weight: 700;
  text-transform: uppercase;
  color: #FB667A;
  text-decoration: none;
}

h3{
    color: white;
}

h4{
    text-align: center;
    font-size: 2em;
}

#Register
{
    margin-left: 750px;
    margin-top: 27px;
}
.btn-update{
    position: absolute;
    bottom: 0;
    margin-bottom: 300px;
    margin-left: -65px;
}

.hideshow{
    position: absolute;
    bottom: 0;
    margin-bottom: 300px;
    margin-left: -65px;
}

.blue { color: #185875; }
.yellow { color: #FFF842; }

.container th h1 {
      font-weight: bold;
      font-size: 1em;
  text-align: left;
  color: #185875;
}

.container td {
      font-weight: normal;
      font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
       -moz-box-shadow: 0 2px 2px -2px #0E1119;
            box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
      text-align: left;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td, .container th {
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left:2%;
}

/* Background-color of the odd rows */
.container tr:nth-child(odd) {
      background-color: #323C50;
}

/* Background-color of the even rows */
.container tr:nth-child(even) {
      background-color: #2C3446;
}

.container th {
      background-color: #1F2739;
}

.container_graph {
  width: 80%;
  margin: 15px auto;
  margin-top: 175px;
}

.container td:first-child { color: #FB667A; }

.container tr:hover {
   background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
       -moz-box-shadow: 0 6px 6px -6px #0E1119;
            box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  /*background-color: #FFF842;*/
  /*color: #403E10;*/

  transition-delay: 0s;
      transition-duration: 0.4s;
      transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}

Look at the below snippet it works fine. Add the cdn's in the below mentioned order.

<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">

           </style>
           </head>
           <body>
           <div id="Tech" class="header">
  <center><img src="public/images/test.png" id='Logo' alt="Logo">
  </center>
</div>

<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<fieldset>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
    <div id="filedrag">
        <img src="public/images/upload3.png" alt="draganddrop">
    </div>
    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
</div>
</fieldset>
</form>

<div id="messages">
</div>

<table id="data-table" class="container">
  <thead>
    <tr>
      <th>
        <h3>Video</h3>
      </th>
      <th>
        <h3>Original Size</h3>
      </th>
      <th>
        <h3>Compressed Size</h3>
      </th>
      <th>
        <h3>Compressed rate</h3>
      </th>
      <th>
        <h3>Savings</h3>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Video1 File Name</td>
      <td>Original File Size</td>
      <td>6369</td>
      <td>01:32:50</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Video 2 File Name</td>
      <td>Original File Size</td>
      <td>10437</td>
      <td>00:51:22</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Video 3 File Name</td>
      <td>Original File Size</td>
      <td>5327</td>
      <td>00:24:34</td>
      <td>450</td>
      <td>
        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Compress</a></li>
              <li class="disabled"><a href="#">Download</a></li>
              <li class="active"><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
  </body>
  </html>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK