10
Gdy szerokość mojego ekranu zmniejsza się mniej niż minimalna szerokość, którą mój stół jest w stanie wyświetlić, zamiast uzyskać poziomy pasek przewijania na opakowaniu table-responsive, zwiększa on szerokość całej mojej witryny. Próbowałem każdego rozwiązania SO, z którym miałem do czynienia bez żadnego szczęścia.Rozruch bootstrap 3 nie działa. Pasek przewijania X pojawia się w całej witrynie, a nie w tabeli
Podejrzewam, że ma to coś wspólnego ze stylem flexbox. Zasadniczo zaprojektowałem moją witrynę tak, aby moja sekcja zawartości głównej strony (która mieszka wewnątrz <div id="aspnet-placeholder-content" class="container"></div>) zajmie pozostałą wysokość okienka po zaksięgowaniu stopki i lepkiego nagłówka. Do tej pory nie miałem żadnych problemów, oprócz tego.
Jak mogę zatrzymać tabelę przed rozszerzeniem szerokości mojej witryny?
EDYTOWANIE: Here's a JSFiddle w przypadku, gdy nie lubisz funkcji WU w SO.
$(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>
To tworzy przewijania _vertical_ w moim '# aspnet-placeholder-content' div, i powoduje stylizację' .container' o należy zignorować, zajmując 100% szerokości strony. To nie rozwiązuje mojego problemu i wprowadza dwa nowe. –
iv'e zredagowałem odpowiedź - mam nadzieję, że pomogłem! –