When my screen width decreases smaller than the minimum width my table is able to display, rather than getting a horizontal scrollbar on the table-responsive wrapper, it is increasing the width of my whole site. I have tried every SO solution I've come across with no luck.
I suspect this has something to do with my flexbox styling. Basically, I've styled my site so that my main page content section (which lives inside <div id="aspnet-placeholder-content" class="container"></div>) will take up the remaining height of the viewport after the footer and sticky header are accounted for. So far I've had no issues, besides this one.
How can I stop the table from expanding the width of my site?
EDIT: Here's a JSFiddle in case you don't like SO's built-in snippet functionality.
$(document).ready(function() { $("a").on("click", function(e) { e.preventDefault(); }) $("form").on("submit", function(e) { e.preventDefault(); }) });body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } form.page-wrapper { padding: 51px 0 0; position: static; height: 100%; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } section#body-content { -ms-flex: 1 0 auto; -webkit-flex: 1 0 auto; flex: 1 0 auto; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } section#body-content #subheader { background: #7e5bbd; padding-top: 35px; padding-bottom: 35px; } #aspnet-placeholder-content { flex: 1 0 auto; } footer { background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top; padding-top: 30px; padding-bottom: 30px; margin-top: 20px; } @media (min-width: 768px) { footer .footer-content div:first-child { text-align: right; border-right: 1px solid #868686; } footer .footer-content div:nth-child(2) { text-align: left; border-left: 1px solid #868686; } } footer h5 { color: #868686; } @media (max-width: 767px) { .padding-left-none-sm, .padding-right-none-sm { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .padding-left-none-sm { padding-left: 0; } .padding-right-none-sm { padding-right: 0; } .text-right-sm { text-align: right; } .text-left-sm { text-align: left; } }<link href="https://maxcdn.bootstrapcdn.com/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> <body> <form class="page-wrapper"> <header class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">Logo</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li id="liHome"><a href="/">Home</a></li> <li class="dropdown" id="liService"> <a href="/" data-toggle="dropdown" class="dropdown-toggle">Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="dropdown-menu dropdown-menu-left"> <li><a href="/">Create Ticket</a></li> <li><a href="/">View Tickets</a></li> </ul> </li> <li id="liProposals"> <a href="/">Proposals</a> </li> <li id="liProjects"> <a href="/">Projects</a> </li> <li id="liDocuments"> <a href="/">Documents</a> </li> </ul> </div> </div> </header> <section id="body-content"> <div id="subheader"> <div class="container"> <div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;"> <button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button> </div> <div class="col-sm-5 col-sm-pull-2 padding-left-none-sm"> <div class="button-group"> <select id="ddlLocations" class="form-control"> <option selected="selected" value="0">(select option)</option> <option value="7889">Option 1</option> <option value="8736">Option 2</option> <option value="10398">Option 3</option> </select> </div> </div> </div> </div> <div id="aspnet-placeholder-content" class="container"> <!--This is where page-specific server-generated content from ASP.NET will render--> <h3>Page Title</h3> <br> <div style="overflow-x: auto"> <table id="tblLocs" class="table table-striped"> <tbody> <tr> <th>System</th> <th>Location Type</th> <th>Location</th> <th style="text-align: center;">Wired</th> <th style="text-align: center;">Equipped</th> <th style="text-align: center;">Programmed</th> <th style="text-align: center;">Tested</th> </tr> <tr> <td>Access Control</td> <td>Computer Station</td> <td>2nd Floor IT Room</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td> </td> <td>Security Office</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td>Badging Station</td> <td>Security Desk</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td>Panel Location</td> <td>1st Floor Comm and Data Room</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td> </td> <td>IT Closet</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> </tbody> </table> </div> </div> </section> <footer> <div class="container"> <div class="row text-center footer-content"> <div class="col-sm-6"> <h5>Footer text</h5> </div> <div class="col-sm-6"> <h5>Copyright stuff</h5> </div> </div> </div> </footer> </form> </body>4 Answers
Answers 1
Thanks to everyone who offered a solution. All of them seem to involve setting the width of my wrapper to 100%, like this:
#aspnet-placeholder-content { flex: 1 0 auto; width: 100%; } The problem is, this nullifies the .container bootstrap styling, which sets hard-coded widths in pixels based on viewport size. I don't want full-page width content, so I've added a new class that's like .container, but uses max-width instead of width:
.container-max { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .container-max { max-width: 750px; } } @media (min-width: 992px) { .container-max { max-width: 970px; } } @media (min-width: 1200px) { .container-max { max-width: 1170px; } } Now my wrapper uses this new class instead of .container, and having width: 100% on the wrapper will have the desired effect.
<div id="aspnet-placeholder-content" class="container-max"> Answers 2
Add flex-wrap: wrap; display: flex; max-width: 100%; to #aspnet-placeholder-content this will wrap your table according to its parent.
#aspnet-placeholder-content { flex: 1 0 auto; flex-wrap: wrap; display: flex; max-width: 100%; } Answers 3
set the width property to 100% ...
a horizontal scrollbar will appear on the table ...
I also moved the h3 tag from the inside of this div ...
#aspnet-placeholder-content { flex: 1 0 auto; width: 100%; } if you want the table to truly be responsive and resize with the page you will have to write some more code regarding individual cells ...
an example of the this can be hound in this thread ...
and another cool solution for a responsive data-table is in this site...
Answers 4
I have changed some css and style and class in your demo and here is the link
<form class="page-wrapper"> <header class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class=navbar-brand>Logo</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li id="liHome"><a href="/">Home</a></li> <li class="dropdown" id="liService"> <a href="/" data-toggle="dropdown" class="dropdown-toggle"> Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="dropdown-menu dropdown-menu-left"> <li><a href="/">Create Ticket</a></li> <li><a href="/>">View Tickets</a></li> </ul> </li> <li id="liProposals"> <a href="/"> Proposals </a> </li> <li id="liProjects"> <a href="/"> Projects </a> </li> <li id="liDocuments"> <a href="/"> Documents </a> </li> </ul> </div> </div> </header> <section id="body-content" class="continer"> <div id="subheader"> <div class="container"> <div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;"> <button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button> </div> <div class="col-sm-5 col-sm-pull-2 padding-left-none-sm"> <div class="button-group"> <select id="ddlLocations" class="form-control"> <option selected="selected" value="0">(select option)</option> <option value="7889">Option 1</option> <option value="8736">Option 2</option> <option value="10398">Option 3</option> </select> </div> </div> </div> </div> <div id="aspnet-placeholder-content" style="padding:0 15px"> <!--This is where page-specific server-gen"tblLocsted content from ASP.NET will render--> <h3>Page Title</h3> <br /> <div class=" table-responsive"> <table id="tblLocs" class="table table-striped"> <tbody> <tr> <th>System</th> <th>Location Type</th> <th>Location</th> <th style="text-align: center;">Wired</th> <th style="text-align: center;">Equipped</th> <th style="text-align: center;">Programmed</th> <th style="text-align: center;">Tested</th> </tr> <tr> <td>Access Control</td> <td>Computer Station</td> <td>2nd Floor IT Room</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td> </td> <td>Security Office</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td>Badging Station</td> <td>Security Desk</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td>Panel Location</td> <td>1st Floor Comm and Data Room</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> <tr> <td> </td> <td> </td> <td>IT Closet</td> <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td> </tr> </tbody> </table> </div> </div> </section> <footer> <div class="container"> <div class="row text-center footer-content"> <div class="col-sm-6"> <h5>Footer text</h5> </div> <div class="col-sm-6"> <h5>Copyright stuff</h5> </div> </div> </div> </footer> </form> $(document).ready(function() { $("a").on("click", function(e) { e.preventDefault(); }) $("form").on("submit", function(e) { e.preventDefault(); }) }); body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } form.page-wrapper { padding: 51px 0 0; position: static; height: 100%; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } section#body-content { -ms-flex: 1 0 auto; -webkit-flex: 1 0 auto; flex: 1 0 auto; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } section#body-content #subheader { background: #7e5bbd; padding-top: 35px; padding-bottom: 35px; } #aspnet-placeholder-content { flex: 1 0 auto; } footer { background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top; padding-top: 30px; padding-bottom: 30px; margin-top: 20px; } @media (min-width: 768px) { footer .footer-content div:first-child { text-align: right; border-right: 1px solid #868686; } footer .footer-content div:nth-child(2) { text-align: left; border-left: 1px solid #868686; } } footer h5 { color: #868686; } @media (max-width: 767px) { .padding-left-none-sm, .padding-right-none-sm { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .padding-left-none-sm { padding-left: 0; } .padding-right-none-sm { padding-right: 0; } .text-right-sm { text-align: right; } .text-left-sm { text-align: left; } } 
0 comments:
Post a Comment