Menu
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>
554
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">
Demo of final result
160
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%;
}
Example
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
