How to make column heights equal in Boostrap4 with embed? - css

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">

Related

CSS to fit content height but not go off screen

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.

Bootstarp 4 - how to change order of cols in different rows for mobile

I need to make a different order for bootstrap col for the mobile. I found many stack overflow question regrading this topic but i did not see any topic that is related to changing the order of cols that are on different rows.
<div class="row d-flex justify-content-around mb-5">
<div id="selectProductCol" class="col-sm-12 col-lg-5">
<div class="d-flex flex-column">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
</span>
</div>
</div>
</div>
<div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last">
<div [#fade]="products.length > 0 ? 'active' : 'inactive'">
<div class="d-flex flex-column">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-around mb-5">
<div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [#fade]="companies.length > 0 ? 'active' : 'inactive'">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
</span>
</div>
</div>
<div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
<div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
policyForm.get('firstPage.productType').value?.type !== null ">
<button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
<label>
<input type="file" (change)="setFile($event.target)">
</label>
</button>
</div>
</div>
</div>
I need to replace the order of selectCashierCol and selectInsuranceCol cols on the mobile
You can't change the order of columns in separate rows because they don't share the same flexbox parent (the row). The solution is to put the columns in the same parent .row...
<div class="row d-flex justify-content-around mb-5">
<div id="selectProductCol" class="col-sm-12 col-lg-5 pb-5">
<div class="d-flex flex-column">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
</span>
</div>
</div>
</div>
<div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last pb-5">
<div [#fade]="products.length > 0 ? 'active' : 'inactive'">
<div class="d-flex flex-column">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
</span>
</div>
</div>
</div>
</div>
<div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [#fade]="companies.length > 0 ? 'active' : 'inactive'">
<div class="d-flex justify-content-between">
<mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
<span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
</span>
</div>
</div>
<div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
<div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
policyForm.get('firstPage.productType').value?.type !== null ">
<button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
<label>
<input type="file" (change)="setFile($event.target)">
</label>
</button>
</div>
</div>
</div>
https://codeply.com/p/n4mw1Vydsy
According to bootstrap version 4's grids system, you have a bootstrap class "order-(here you can set the order number from 1 to 12)" like order-2 which means that respective div will be placed on second number. The default value of order is 0, so if you haven't added any order class to a specific div, then it will be ordered firstly.
You can also set the order differently for different breakpoints like if you want a div to be placed on 1st order in desktop view but should be placed at the last in mobile view you can assign two classes to it like this: order-lg-1 order-12.
Note: This order class will only work with divs having column class, it will not work for parent row containers.
For complete documentation, please visit bootstrap's site: https://getbootstrap.com/docs/4.0/layout/grid/
I think what you’re looking for is just the css order property. There is a great example of this on MDN. And the cool part is this is built into CSS itself so if you end up not using the bootstrap library you could still use this property. Really cool stuff!
https://developer.mozilla.org/en-US/docs/Web/CSS/order
I hope this helps.

How to put collapse toggle bootstrap in float-right and on top everything?

I'm trying to create a vertical menu on the right side and on top of all the contents of the body, however as soon as I enter the position the menu goes to the left side.
What should I do to keep it on top of the whole body and on the right side? Remember that a horizontal overflow will be added to it.
<!-- NAVBAR -->
<header role="main" id="header" class="fixed-top">
<nav class="navbar navbar-expand justify-content-between">
<form class="form-inline form-row bg-white rounded shadow">
<div class="col-12 col-sm-auto p-0">
<div class="input-group ml-sm-2">
<div class="input-group-prepend">
<label class="input-group-text bg-transparent border-0" for="select-indicador"><i class="al-icon-line-chart al-text-dark-grey"></i></label>
</div>
<select id="select-indicador" class="custom-select form-control border-0 rounded-0 shadow-none">
<option selected>Indicador</option>
<option value="1">Venda Absoluta</option>
</select>
</div>
</div>
<div class="col-12 col-sm-auto p-0">
<div class="input-group">
<div class="input-group-prepend">
<span id="periodo-icon" class="input-group-text bg-transparent ml-2 ml-sm-0 border-0"><i class="far fa-calendar-alt al-text-dark-grey"></i></span>
</div>
<input type="text" id="periodo-picker" class="form-control border-0 shadow-none" placeholder="Período" aria-label="Período" aria-describedby="periodo-icon">
</div>
</div>
<div class="col-12 col-sm-auto p-0">
<button type="button" id="btn-search" class="btn btn-lg d-block w-100 al-bg-green shadow-none"><i class="fab fa-searchengin fa-lg text-white"></i></button>
</div>
</form>
<button type="button" class="btn navbar-toggle al-bg-dark-grey py-5 py-sm-2 ml-3 ml-sm-0 shadow" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle Navigation"><i class="al-icon-navmenu al-text-green"></i></button>
</nav>
</header>
<!-- NAVBAR TOGGLE EXTERNAL CONTENT -->
<section role="external-content-section" id="navbarToggleExternalContent" class="collapse external-toogle-content-section float-right rounded al-bg-dark-grey">
<div class="container">
<div class="row">
<div class="col-12"><button type="button" class="btn float-right pt-4 pt-sm-0 py-3 px-3 mt-4 mt-sm-3 border-0 bg-transparent shadow-none" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle Navigation"><i class="fas fa-times fa-3x al-text-green"></i></button></div>
<div class="col-12" style="background-color: red"><h5>HOME</h5></div>
<div class="col-12">
<details class="float-left mt-3 mb-3">
<summary>Rio de Janeiro</summary>
<p><h6>Boulevard Shopping Campos</h6></p>
<p><h6>Carioca Shopping</h6></p>
<p><h6>Carioca Shopping</h6></p>
<p><h6>Caxias Shopping</h6></p>
<p><h6>Shopping Grande Rio</h6></p>
<p><h6>Shopping Leblon</h6></p>
<p><h6>Via Parque Shopping</h6></p>
</details>
</div>
</div>
</div>
You've mentioned you are using bootstrap 4, so use the class .float-right in your div.
If you want to move the div to the right using custom CSS try the following -
.pull-right {
right: 0px;
}
Review bootstrap 4 doc for reference.

Bootstrap 4 center header elements on mobile

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>

Bootstrap: prevent default mobile collapsing

How can I prevent some of the default mobile functionality? (c.f. Bootstrap - Creating a mobile nav that doesn't use collapse)
In particular, I want to get two rows of navbar:
the first with logo and page title;
the second with something that will toggle a sidebar, with a search box filling the rest of the space.
The first time I tried I ended up ignoring the nav-bar and building my own layout, but before abandoning again I thought I would check the community. The main problem is that the search box insists on being 100% width (on small screens).
Playing around with Chrome devtools, I can turn off width:100% in .form-control but I can't seem to get .form-group to contract
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
af
</div>
<div id="navbar-main">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left">
<ul class="nav navbar-nav">
<li>Crieria</li>
</ul>
</div>
<div id="navbar-search" class="navbar-right">
<form class="navbar-form " role="search">
<div class="form-group">
<input type="text" size="20" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</form>
</div>
</div>
</div>
Try this:
If you need full width in the md and lg view use container-fluid instead of container
DEMO
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
af
</div>
<div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
<ul class="nav navbar-nav">
<li><a href="" data-toggle>Crieria</a></li>
</ul>
</div>
<div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</div>
</div>
</div>
Where ever you do not want Bootstrap behavior, just don't use bootstrap classes, rather define your own classes with the styling and behavior you do want it to have.
If you attempt to overwrite Bootstrap behavior for any page element of substantial size and complexity; you'll find it would have been far easier if you'd just avoided using the bootstrap classes on that element by the time you overwrite all of it's behavior.
If all you want is a navbar with two rows though you could do it with boostrap default classes if you wanted to.. jsFiddle (link)
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">
<div class="span10">
<div class="row">
<div class="span2 offset5" style="text-align:right">
<div class="navbar-text">
<p>Login</p>
</div>
</div>
<div class="span2 offset1">
<div class="pull-right">
<form class="navbar-form">
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<ul class="nav pull-right">
<li>Page 1</li>
<li class="divider-vertical"></li>
<li>Page 2</li>
<li class="divider-vertical"></li>
<li>Page 3</li>
<li class="divider-vertical"></li>
<li>Page 4<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Resources