How to fix flex div to take full height as its parent - html

Actually, I want to trigger a onClick on the body where discussion and icons are positioned. However, onClick on the body is not having any problems. The spacing area, however, is where it breaks. I wish to close this gap. but are unable to. Is there a fix for the space that would allow me to make the entire body clickable?
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="d-flex flex-column align-items-strentch " onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 flex-1 d-inline-block" >
<text class="bg-warning "> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>


For the onclick div, you are not obliged to use flex position.
You can add h-100 to get 100% height
You can use this :
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="h-100 " onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 flex-1 d-inline-block" >
<text class="bg-warning "> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
</body>

Related

how to prevent text from changing the height of other elements

I have two divs and want to display the content of both divs in the same location. Since the text in the first div is longer and has an impact on where the body content is positioned, the two divs do not look alike.I want the position of second div body content like first div body content. Please see the SS that I have attached.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map function here dsdsadsadsffffffff
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>

Remove your static height's then use the .py-3 class for 1rem of vertical padding on your .h-100 div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map function here dsdsadsadsffffffff
</div>
<div class="h-100 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center py-3">
Somecontent from a map
</div>
<div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

If you don't want to change the height, the only thing I can see is to cut the text or to increase the width or your elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<style>
span {
width : 100%;
word-break: break-all;
overflow: hidden;
position: relative;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
<span>Somecontent from a map function here dsdsadsadsffffffff<span>
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>

Boostrap chat keeping message box at bottom of screen

Hi I am trying to have a row stay at the bottom of the screen for a message send input box, the problem I am having is that if I set the row:
row d-flex position-absolute bottom-0
the columns are not taking the horizontal space in the row.
here is my Boostrap 5 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<title>Stripe connect</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
and here is an image:
columns are to the left and not taking up the full width
Thanks for the help

Since you're deliberately placing the utility classes also specify the start-0 and end-0 declarations as well. Cheers
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0 start-0 end-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>

Bootstrap - Flex Box Container With Scrollable Content

I am trying to build a fairly standard application layout with Bootstrap 5 and flexbox, consisting of a top bar, bottom bar and an auto-sized content area. The content area is split into a side bar and a main content area.
For reference I want it to look something like VSCode.
With some tags omitted for brevity, here is what I have so far:
<!doctype html>
<html class="h-100 mh-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.sidebar {
background: red;
flex: 0 0 25%;
}
.main {
background: blue;
}
</style>
</head>
<body class="h-100 mh-100">
<div class="h-100 mh-100 d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row">
<aside class="sidebar d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Side Title Bar</span>
</div>
<div class="sidebar-content overflow-scroll">
<div style="height: 0; background: magenta;"></div>
</div>
</aside>
<main class="main flex-fill">
</main>
</div>
<div class="bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
What I want is for the sidebar content to scroll when it exceeds the available space in the viewport, but for example if you increase the height of the content div in the sidebar the whole lot scrolls together, and pushes the bottom bar out of view.
How do I keep all panels in view (top, bottom, side and main), and allow individual panels to scroll when necessary, without pushing the content out of view?

Use the flex-* and overflow-* classes. Also, it's easier to set the height using vh-100 so that you don't need to set h-100 on html, body, container, etc...
<div class="vh-100 d-flex flex-column overflow-hidden">
<div class="flex-shrink-1 bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row overflow-auto">
<aside class="sidebar d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Side Title Bar</span>
</div>
<div class="sidebar-content p-2 overflow-auto">
</div>
</aside>
<main class="main flex-fill p-3 overflow-auto">
</main>
</div>
<div class="flex-shrink-1 bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>
Codeply
Related: How to implement responsive, independently scrolling panes in Bootstrap?

Flexbox displays divs incorrectly rather than making the container scrollable

I was playing with flexbox and, when I attempted to make a scrollable list of days, I noticed that the first two days of the "week" are being "swallowed". The container is scrollable, but the beginning of the list doesn't display.
Basic code:
<div class="p-1 p-sm-3">
<div class="d-flex justify-content-center text-center" style="overflow-x: auto;">
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
...other days of the week here
</div>
</div>
Full Fiddle: https://jsfiddle.net/98vf7xek/

Your problem is caused by rule justify-content: center!important, which is generated by class justify-content-center. Here:
<div class="d-flex justify-content-center text-center" style="overflow-x: auto;">
...
</div>
Just remove this class and your problem will be solved.

Use margin to center your elements instead of justify-content-center (applied to the first and last element)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body class="bg-secondary">
<div class="p-1 p-sm-3">
<div class="d-flex text-center" style="overflow-x: auto;">
<div class="px-4 py-5 mx-1 bg-white rounded ms-auto"> <!-- HERE --->
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded">
<h3>04</h3>
<p>04/01/2020</p>
</div>
<div class="px-4 py-5 mx-1 bg-white rounded me-auto"> <!-- HERE --->
<h3>04</h3>
<p>04/01/2020</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>

Is there a way to get rid of the horizontal dark padding?

Im trying to use almost all the space horizontally within the dark container to use almost all of it's width with the white col. Is there a way to get rid of the preset padding by Bootstrap?
<div class="col pt-5 text-center bg-warning text-light">Main
            <div style="height:400px;" class="row bg-dark">
        <div class="col-5 bg-white mt-4 text-dark">Article</div>
        <div class="col bg-white mt-4 text-dark">Article</div>
            </div>
no-gutter did do it for me
here the full code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloques con Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div>
<div class="container text-center bg-dark p-3">
<div class="text-light bg-info col-3 offset-4 p-1">Header</div>
</div>
</div>
<div class="row">
<div style="height:300px;" class="col-4 text-center bg-info text-light pt-4">Aside</div>
<div class="col pt-5 text-center bg-warning text-light">Main
<div style="height:400px;" class="row bg-dark">
<div class="col-5 bg-white mt-4 text-dark">Article</div>
<div class="col bg-white mt-4 text-dark">Article</div>
</div>
</div>
</div>
<div>
<div class="bg-success text-center text-light py-3">Footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>

Instead of mt-4 use pt-4.
margin will not do what you want
<div class="col pt-5 text-center bg-warning text-light">Main
<div style="height:400px;" class="row bg-dark">
<div class="col-5 h-100 bg-white pt-4 text-dark">Article</div>
<div class="col h-100 bg-white pt-4 text-dark">Article</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/spacing/