I would like to define a div that has the following characteristics:
It expands vertically to fit content.
It does not expand off screen but rather shows a scrollbar.
I'm using this "List Group" example here as a base:
https://getbootstrap.com/docs/5.2/examples/sidebars/
However, when I add something above the scrolling list, the list doesn't shrink down vertically to accommodate the header, it just pushes the scroll list down and now I have two scroll bars: one for the screen (since the whole list got pushed down) and another scroll bar for the list box (since its still the same size and has to scroll its internal elements).
<div class="d-flex flex-column">
<div>
<header class="mb-1 py-2 w-100">
<div class="align-items-center container-fluid d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="m-0 p-0">
<div class="align-items-center d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
<span class="fs-4">Task Administration</span>
</div>
</div>
<div class="m-0 p-0">
<button class="btn btn-primary float-end">Save all changes</button>
<button class="btn btn-danger float-end me-4">Discard all changes</button>
</div>
</div>
</header>
<div class="bh-divider"></div>
</div>
<main class="d-flex flex-nowrap" >
<div class="d-flex flex-row" >
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Categories</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div class="border-bottom list-group list-group-flush scrollarea" id="contentArea">
<data-items-list></data-items-list>
</div>
</div>
</div>
</main>
</div>
If I don't fix the height on id="contentArea", to something like height:800px, then the list always bumps off the screen and creates 2 scrollbars.
I'd rather not fix the height since different people have different sized screens.
I've been racking my brains trying all sorts of css shenanigans, but nothing seems to work and writing my own javascript to do this seems like a bad idea.
Thanks all for your time and attention.
Related
I have implemented a container in such a way that on extra small screen they should have assigned width.
<div class="container w-60 border border-secondary">
<h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>
<hr/>
<div class="row mt-5">
<div class="col-xs-1">
<span>1x</span>
</div>
<div class="col-xs-6">
<small class="text-muted description">Some description</small>
</div>
<div class="col-xs-2">
<div class="btn-group" role="group" aria-label="quantity">
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
</div>
</div>
<div class="col-xs-1 float-right">
40€
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
<span class="glyphicon glyphicon-trash border border-success btn-sm align-top float-right btntrash"></span>
</button>
</div>
</div>
It looks okay on most of the screens
but on s5 it looks bit distorted.
I want trash button to be in a same row like in first picture.
I am using bootstrap and using class="col-xs-X" to split the columns on small screens.
Why its not working for s5 device ?
Second problem is:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.
Could you please give me some pointers ?
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.
A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).
And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.
<div class="row mt-5">
<div class="col-auto col-sm-1">
<!-- Quantity -->
</div>
<div class="col col-sm-6">
<!-- Description -->
</div>
<div class="col-auto col-sm-2">
<!-- Plus/Minus buttons -->
</div>
<div class="col-auto col-sm-1 float-right">
<!-- Price -->
</div>
<div class="col-auto col-sm-2">
<!-- Delete Button -->
</div>
</div>
col-auto is used to size the column based on it's content.
col is used to fill up any left over space in the row.
I'm working to create an interactive web interface, and I have a row in bootstrap with two columns. One column contains an "embed-responsive-16by9" and the other has a ul that I don't know the height of. How would I be able to make the column with the ul stay the height of the embed, overflowing if it is larger but not going less if it is smaller?
I've tried ".row-eq-height", setting max-height, etc. but nothing seems to be working.
<div className="container-fluid">
<div className="row h-40 row-eq-height">
<div className="col">
<div className="rounded resize shadow-sm">
<div className="embed-responsive embed-responsive-16by9">
<iframe
className="embed-responsive-item"
src="https://www.youtube.com/embed/RHXsHZMBIcQ"
title="Video Player"
/>
</div>
<div className="pl-2 pt-2">
<input className="mr-1" type="checkbox" />
<label>Autoplay?</label>
</div>
</div>
</div>
<div className="col">
<ul className="list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 resize shadow-sm">
<nav className="navbar navbar-light navbar-right bg-light m-2 p-1">
<h1 className="navbar-brand">Watched Teams</h1>
<div className="form-inline my-2 my-lg-0">
<input
className="form-control mr-sm-2"
type="search"
placeholder="Search"
/>
<button
className="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</div>
</nav>
{this.state.teams.map(team => (
<Team key={team.teamNum} team={team} />
))}
</ul>
</div>
</div>
</div>
BTW I am doing this all through react, so this is somewhat separated as it's in multiple components, but this is all put together for the sake of the post.
SOLUTION: The key was using h-100 and flex-grow-1...I had tried both before, but I guess not on the ul element directly.
<ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">
The key was using h-100 and flex-grow-1...I had tried both before, but I guess not on the ul element directly.
<ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">
In Bootstrap 4 mark-up, I have a left-hand column which contains a .list-group, which, dynamically generated, could contain dozens of .list-group-items.
On its right, I have a column containing a .row which itself contains numerous cards, all inside columns. There may be hundreds of these...
<h3 class="text-secondary pb-3">Header</h3>
<div class="row">
<div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 7000px; overflow-y: scroll;">
<div class="list-group list-unstyled">
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
</div>
</div>
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9>
<div class="row">
Lots of cards throughout this row, inside .col-lg-4 cards.
</div>
</div>
</div>
Depending on the amount of content on the right, the left-hand .list-group may come up far longer than the volume on the right. In such a case, I want the displayed height of the .list-group to be limited and for the .list-group to be independently scrollable.
I have managed to implement that by applying the CSS rule overflow-y: scroll; to the column containing it, which feels great...
The thing is, I can only manage it by manually setting the height of the column at, eg. max-height:7000px;.
The trouble with this is, depending on the volume of content on the right, it risks shortening the viewable .list-group. In this example, the bottom of the left-hand .list-group column should stretch to the bottom of the adjacent right-hand content, whilst also retaining independent scrolling...
How can I ensure that, where the left-hand column / the .list-groupis physically longer than the content on its right, has its viewable height cut short to match the height of the stuff on the right?
This should retain overflow-y: scroll; so that, if the list is still longer than what is on the right, it can scroll vertically.
Solution would ideally use Bootstrap 4 styles and not resort to writing custom CSS rules.
Since the overflow scroll needs a fixed height, you can't use auto. You need to change the height of scroll area with jquery using the height of cards area with base.
If the content is generate dinamically, you need set a timeout before equal the heights.
Here is a example using jquery. In the example, I get the height of cards area and set it to height of list group area.
Html
<h3 class="text-secondary pb-3">Header</h3>
<div class="row">
// Add a class to the list group area and set height instead max-height
<div class="list-group-area col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="height: 300px; overflow-y: scroll;">
<div class="list-group list-unstyled">
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
</div>
</div>
// Add a class to the card area
<div class="cards-area col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
<div class="row">
Lots of cards throughout this row, inside .col-lg-4 cards.
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
// Delay
setTimeout(function() {
$('.list-group-area').height($('.cards-area').height());
}, 1000);
});
Using bootstrap 4.0.0, I have the following code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
<h5>Title</h5>
<p style="font-size: 14px;">text text text</p>
<button type="button" class="btn btn-primary"> Click me </button>
</div>
</div>
... repeated many times
</div>
</div>
I am trying to create a grid of 3 by x jumbotrons. I am not able to expand the height of the jumbotrons as to cover 100% of the given row in which they are. Each one is with their own height. The ideal is that the <h5> and the <p> are top-aligned, while the <button> is bottom-aligned.
How can I achieve the above? Thanks
Use the flexbox utils for the jumbrotrons.
<div class="col-md-4">
<div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
<h5>Title</h5>
<p style="font-size: 14px;">text texttext</p>
<button type="button" class="btn btn-primary mt-auto"> Click me </button>
</div>
</div>
https://www.codeply.com/go/4uafEjOFdn
h-100 - make jumbotron fill height of col
d-flex flex-column - display:flex the jumbotron the content vertically
align-items-start - align content down the left side
mt-auto - align bottom on the bottom
Related: Bootstrap 4 cards - align content at the bottom
Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>