I am trying to get datatables to only display within the bs4 grid but it seems to always go outside the defined grid. Here is an example. You can see that I have a class="container-fluid" and then a col-md-2 (left menu) and col-md-10 (main content and displays a datable). For some reason the datatable extends past the col-md-10 to the right. Any suggestions appreciated.
I tried to condense my html as much as follows. Here it is;
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <style> body{margin-top:50px;} .accordion{padding-top: 5px;} .cardmargin{margin-bottom: 5px;} .panel-body { padding:5px; } .panel-body table tr td { padding-left: 15px } .panel-body .table {margin-bottom: 0px; } .fas { margin-right:10px; } </style> <link rel="icon" href="/images/favicon.ico"> <!-- CSS Admin / post_index --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" crossorigin="anonymous" <link rel="stylesheet" href="https://development.example.com/assets/admin/post/css/post_index.css" crossorigin="anonymous"> <title>Blogs!Admin Area</title> <!-- font awesome for bs4 --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <!-- temp --> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/jumbotron/"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="/assets/css/jumbotron.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="/">example.com</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <!--logged in menu --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Welcome richard!</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="/Profile/profile_read">Profile</a> <a class="dropdown-item" href="/Login/login_delete">Logout</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin Menu</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="/Admin/users/index">Users</a> <a class="dropdown-item" href="/Login/login_delete">Logout</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <main role="main"> <!-- show any flash messages --> <div class="container-fluid"> <div class="row"> <div class="col-sm-2 col-md-2"> <!-- accordion sidebar here --> <!-- accordion side menu --> <div id="accordion" class="accordion"> <!-- blogs // collapseTwo--> <div class="card cardmargin"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Blogs </a> </div> <div id="collapseTwo" class="collapse show" data-parent="#accordion"> <div class="card-body"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="fas fa-pencil-alt"></span><a href="/admin/post/post_index">Posts Index</a> </td> </tr> <tr> <td> <span class="fas fa-newspaper"></span><a href="/admin/post/post_create">New Post</a> </td> </tr> <tr> <td> <span class="fas fa-paper-plane"></span><a href="/admin/category/category_index">Categories</a> </td> </tr> <tr> <td> <span class="fas fa-comments"></span><a href="/admin/category/category_create">New Category</a> <span class="badge badge-dark">42</span> </td> </tr> </table> </div> </div> </div> </div> <!-- users // collapseThree--> <div class="card cardmargin"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> <span class="fas fa-users"></span>Users</a> </div> <div id="collapseThree" class="collapse " data-parent="#accordion"> <div class="card-body"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="fas fa-pencil-alt"></span><a href="/Admin/users/index">List</a> </td> </tr> <tr> <td> <span class="fas fa-newspaper"></span><a href="/Admin/users/user_create">New User</a> </td> </tr> <tr> <td> <span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Login Attempts</a> </td> </tr> <tr> <td> <span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">other</a> <span class="badge badge-dark">42</span> </td> </tr> </table> </div> </div> </div> </div> </div> </div> <!-- content --> <div class="col-sm-10 col-md-10"> <!-- show errors --> <!-- show posts intro --> <div class="row"> <h1>Posts</h1> </div> <!-- list posts --> <div class="row"> <table id="post_index" class="table table-striped table-bordered" > <thead> <tr> <th>Category</th> <th>Author</th> <th>Title / Post</th> <th>Published?</th> <th>Created</th> <th>Updated</th> <th></th> </tr> </thead> <tbody> <tr> <!-- category --> <td> <a href="https://development.example.com/admin/category/index/93"> Cargo </a> </td> <!-- author --> <td> <a href="https://development.example.com/admin/post/post_read/48"> Mr John </a> </td> <!-- title / post --> <td> <h6> This is the last post</h6></br> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.… <a href="https://development.example.com/admin/post/post_read/242"> Read more... </a> </td> <!-- is_published --> <td> <a href="/admin/post/toggle_post_is_published/242" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Not Published" onclick="return confirm('Are you sure you want to publish the post?')"> <i class="fas fa-frown"></i></a> </td> <!-- post_created_at --> <td> 2021-05-03 10:45:11 </td> <!-- post_updated_at --> <td> 2021-05-03 10:45:11 </td> <!-- navigation --> <td nowrap> <a href="https://development.example.com/admin/post/post_read/242"> <span class="fas fa-book-reader"> </span> </a> <a href="https://development.example.com/admin/post/post_update/242"> <span class="fas fa-edit"> </span> </a> <a href="#" data-toggle="tooltip" title="Delete Post"> <a href="https://development.example.com/admin/post/post_delete/242" onclick="return confirm('Do you want delete this post?')"><span class="fas fa-trash-alt"></span> </a> </a> </td> </tr> </tbody> </table> </div> <!-- no posts --> </div> <!-- end content --> </div><!--end row --> </div> <!-- end container --> <hr> </main> <footer class="container"> <p>© example.com 1999-2021 || Phone: +81-555-5555-5555 || Fax: +81-555-5555-5555|| Email: info@example.com </p> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script> <!-- load additional scripts here --> <!-- Scripts Admin / post_index --> <script src="https://development.example.com/assets/admin/post/js/post_index.js"></script> </body> </html> 
没有评论:
发表评论