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">
<a href="">Somecontent from a map</a>
</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>
>Solution :
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">
<a href="">Somecontent from a map</a>
</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>