My web application has some areas placed in the page. Basically:
<body>
<nav> <-- top nav bar
<ol> <-- breadcrumb
<div> <-- row with buttons
<div class="overflow-auto">
<table> <-- run-time growing table
</div>
<footer> <-- sticky footer
</body>
At run-time my scripts add rows to the table.
To get the overflow-auto class working I have to set a max-height value.
If I set it to 100% it just grows like without overflow. It works if I set a px value only.
My goal, instead, is to fill all the available space (so it depends on the browser, width, etc...) between the previous div (row with buttons) and the sticky footer.
In other words, I want the user always sees the footer so when the table reach it, the overflow feature should begin to work.
I don't understand if this can be easily handled with some specific classes or I have to manually compute the available height (if even possible...).
UPDATE
I cannot manage it to work with a sidebar. Complete code:
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav id="nav_top" class="navbar navbar-expand navbar-dark bg-dark static-top">
<ul class="navbar-nav d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item">
<h5>
<span class="badge badge-secondary">BLABLA</span>
</h5>
</li>
</ul>
</nav>
<div id="wrapper">
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<span>NAV 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">
<span>NAV 2</span>
</a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Current page</li>
</ol>
<button type="button" class="btn btn-info mb-3">BUTTON</button>
<div id="content" class="row overflow-auto">
<div class="col-12 table-responsive">
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">COL 1</th>
<th scope="col">COL 2</th>
<th scope="col">COL 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
It's not clear to me what affect the overflow-auto behavior. I need the row/col divs in order to keep margins.
I think you'd want to use flexbox for this...
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav> <-- top nav bar -->
<ol> <-- breadcrumb -->
<div> <-- row with buttons -->
<div class="overflow-auto">
<table> <-- run-time growing table -->
</div>
<footer class="mt-auto"> <-- sticky footer -->
</body>
vh-100 - makes the entire body viewport height
d-flex flex-column - make the body display:flex, flex-direction:column
overflow-hidden - prevents the body from scrolling
mt-auto - to make the footer stick the the bottom
Demo: https://www.codeply.com/go/FSrBOdRVFG
Basically this has been answered before:
Bootstrap 4 row fill remaining height
How to make the row stretch remaining height
Bootstrap 4: Scrollable row, which fills remaining height
Related
I have three Bootstrap v5 Tables that I want to be contained within the main body of my page. I am currently using Bootstrap Tabs in which the three different tables are contained separately. I have included one of my tables in my HTML example below.
My main body / content is defined by a div with the class="container custom". I have set it to have a height of 100vh in an attempt to have everything scale/fit within the viewport/browser height.
This is because I want to utilise the sticky table header and so the controls of the page aren't lost when the user scrolls to view certain table entries.
<div class="container custom flex-column">
<div class="row">
<div class="col m-auto p-3"><h1 class="text-center">Company Directory</h1></div>
</div>
<div class="flex-row p-3 mb-2" id="searchAndGo">
<div class="col flex-fill btn-group-sm">
<div class="input-group mb-3">
<input class="form-control" type="text" id="searchQuery" size="20" placeholder="Search Names">
<select id="locations" class="_locations">
</select>
<select id="departments" class="_departments">
</select>
<div class="float-end btn-group">
<button class="btn btn-success" id="startSearch" onclick="startSearch()">GO</button>
<button class="btn btn-danger" onclick="resetAll()">Reset</button>
</div>
</div>
</div>
<div class="flex-row text-center">
<div class="dropdown" id="dropDownContainer">
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Advanced Settings
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2" id="radioSelect">
<li><span class="dropdown-item-text">Search by:</span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="any" type="radio" value="any" name="name" checked><label for="any">Any</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="forename" type="radio" value="forename" name="name"><label for="forename">Forename</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="surname" type="radio" value="surname" name="name"><label for="surname">Surname</label></span></li>
</ul>
</div>
</div>
</div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-personnel" role="tab">Personnel</a>
<a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-departments" role="tab">Departments</a>
<a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-locations" role="tab">Locations</a>
</div>
</nav>
<div class="tab-content container" id="myTabContent">
<div class="tab-pane fade show active table-responsive" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">
<button id="addEntry" class="btn btn-success" onclick="openAddModal()">Add Personnel</button>
<table class='table table-striped table-hover' id="companyDirectoryPersonnel">
<thead>
<tr>
<th scope="col">Full Name</th>
<th scope="col">Location</th>
<th scope="col">Department</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
</table>
</div>
I want to use the Bootstrap table-responsive class to add a scroll bar and have the table header scroll with the table.
I've tried fiddling around with different divs around the table but none of them seems to want to adhere to the container custom div set height. I've tried using different overflow css rules on the main container and divs around the different tables and none of them worked in the way I had hoped. I even tried inherit on height but I think there's too many divs between the tables and the main body content div
Here is my current CSS that is used in the image 1 above:
body {
background-color: #85daf1;
}
.custom {
display: flex;
background-color: hsl(47, 100%, 93%);
height: 100vh;
}
I was trying to take an exercise and create an advanced layout as shown below.
After I came up with two solutions I started to wonder what is the best solution for creating such a layout.
Would you use flex display or table display? Would you consider using bootstrap or not? What should I consider when choosing one over the other in this case? Also taking in consideration devices with smaller resolution, for example 800px or less.
Here are my implementations:
Flex implementation:
<div class="container p-0">
<div class="d-flex flex-row bd-highlight">
<div class="flex-grow-1 bd-highlight">
<div class="mt-3 ml-3">
#C0000028524
</div>
</div>
<div class="flex-grow-10 bd-highlight d-flex long-title-container">
<div class="mt-3 long-title">
<p class="long-title mb-0 fs-5">
Context menu shows wrong language
</p>
</div>
</div>
<div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
</div>
<div class="d-flex flex-row bd-highlight">
<div class="flex-grow-1 bd-highlight mlm-1">
<img src="open.png" />
</div>
<div class="flex-grow-10 bd-highlight d-flex long-title-container"><p class="long-title">Context menu shows wrong language</p></div>
<div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
</div>
</div>
Link to the flex implementation: https://jsfiddle.net/7d512swt/
And here is my table implementation:
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th scope="row">
<div class="mt-3 ml-3">
#C0000028524
</div>
</th>
<td>
<p class="long-title mb-0 fs-5">
Context menu shows wrong language
</p>
</td>
<td>last updated</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="open.png" /></td>
<td><p class="long-title">Context menu shows wrong language</p></td>
<td>last updated</td>
</tr>
</tbody>
</table>
</div>
Link to the table implementation:
https://jsfiddle.net/auv08hdq/
I am trying to create a header on a website that consists of a table with two columns.
The column on the left should have an only row with the Logo, instead, the column on the right should have two rows.
The first row should have the contacts of the socials ,
while the second and final row should have a responsive navbar ( aligned on the right obviously ).
Is it possible to obtain this with Bootstrap?
One solution I thought about could be a table with two columns, with the row on the left consisting of the logo, and the row on the right that consists of the socials links.
Then below that table I would implement the usual responsive navbar.
Obviously I rather prefer to implement the first solution, but if a solution with Bootstrap is not possible I will probably go for the second solution.
I would gladly appreciate any advice or comment that is positive toward that goal.
Thank you so much for your time!
This is the code I got so far:
<tc>
<tr>
<th>Image</th>
</tr>
</tc>
<tc>
<tr>
<th>Social</th>
</tr>
<tr>
<td>
<nav class ="navbar navbar-dark bg-dark navbar-expand-sm ">
<button type = "button" class="navbar-toggler" data-toggle="collapse" data-target="#topNav"> <span class="navbar-toggler-icon" ></span> </button>
<div id="topNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"> Home </li>
<li class="nav-item">I nostri gelati</li>
<li class="nav-item"> La nostra storia</li>
<li class="nav-item"> Perchè così buono</li>
<li class="nav-item"> Trovaci </li>
</ul>
</div>
</nav>
</td>
</tr>
</tc>
</table>
Here's a pure Bootstrap solution to get you started:
https://codepen.io/panchroma/pen/djaNgo
The simplified code showing the grid layout is
<div class="container">
<div class="row">
<div class="col-md-3">logo</div>
<div class="col-md-9">
<div class="container">
<div class="row justify-content-end">social links</div>
<div class="row justify-content-end">
<!-- navbar here -->
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- col-md-9 -->
</div> <!-- row -->
</div> <!-- container -->
As you can probably see, if you want to build this using native Bootstrap classes you would have a row with two columns.
The left-hand column holds the logo, and then in the right-hand column you have a nested container which has rows for your social links and your navbar.
I've used the class of .justify-content-end to right-align the social links and the nav-bar.
I hope this helps!
I recently started using Bootstrap 4 instead of 3. The first problems start to appear...
When i resize the browser window, the divs are getting on top of eachother. They should break to a new row when it does'nt fit anymore.
Why is the happening and how can i prevent it?
Ill followed the docs, but i can't figure out why its doing this. Bootstrap 3 did'nt had this problem (i know, Bootstrap 4 is using flexboxes)
.first-td-bold tr td:first-child {
font-weight: bold;
padding-right: 40px;
}
.no-wrap tr td {
white-space: nowrap;
}
.no-wrap a {
white-space: nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md-8">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</div>
</div>
</body>
Ok so this seems to do what you are looking for. Here's the pen https://codepen.io/chris-hitchcock/pen/BPybej
I did take out the nested row because it seemed negligible with what you are doing, but if you need to put it back, pretty simple. Basically only declared the width of your first one "col-md-2" the rest are col-md to allow the break but have content flow. Also added a little margin to the first column as the middle column was squishing into your navbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 pad">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</body>
I am using the Solution 1, the one true layout solution, from the stackoverflow question How can I make Bootstrap columns all the same height?
When more than 1 column in a bootstrap row is scrollable it seems to get overlapped by the other columns in that row. In the below example, only 1 of the 3 scrollable columns is visible while a similar column that is not scrollable also shows.
CodePen
html
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row sameHeightRow">
<div class="col-xs-8 sameHeightCol" style="background-color: grey">
test <br><br><br><br><br><br><br><br><br>
</div>
<div class="col-xs-1 sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">2</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">3</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">4</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
</div>
</body>
css
.scrollable{
max-height: 200px;
overflow:auto;
}
.sameHeightRow {
overflow: hidden;
}
.sameHeightCol {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
I've forked your pen.
I guessed that the Bootstrap styles somehow weren't playing nicely with your .scrollable and .sameHeightCol styles, so what I did was move them to the <ul>s like so:
<div class="col-xs-1">
<ul class="list-group scrollable sameHeightCol">
<!-- <li> -->
</ul>
</div>
This resolved the overlap issue, but then the 4 columns were too tall, so I wrapped them in another div and gave that div a height.
<div class="col-xs-4 columnContainer">
<!-- Original col-xs-1 divs now become col-xs-3 -->
</div>
.columnContainer {
height: 200px;
}
Hope this helps, and let me know if this wasn't what you were trying to achieve.