CODEWITHSUNDEEP
htmlcssbootstrap-5
sumeshsn1
sumeshsn1

Reputation: 868

Why the col-auto with red border taking extra height than it's available content?

I have used bootstrap 5 version for this code. When you check this in full screen width the col-auto with the red border takes extra space than it's available content. The content space inside is marked with yellow border. I wonder what causing the this space break. Can some one please help?

html,body{
  height:100%;
}
.search-field .form-control {
  padding-left: 2rem;
}

.search-field .form-control-search {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.3rem;
  text-align: center;
  pointer-events: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
  <title>Document</title>
</head>
<body>
  <section class="container-fluid h-100">
    <div class="row flex-column h-100">
        <div class="col-auto py-2 border border-danger bg-light-subtle">
            <div class="row g-0 align-items-center border border-warning">
                    <div class="col-auto pe-2">
                        <div class="rounded bg-dark text-light p-1 lh-1">
                            <i class="bi bi-person-check align-middle lh-1"></i>
                        </div>
                    </div>
                    <div class="col-4 align-self-end">
                        <h6 class="fw-bold text-truncate pt-1">Assigned</h6>
                    </div>
                    <div class="col col-lg-4 ms-auto">
                        <form class="pr-2">
                            <select class="form-select" aria-label="Default select example">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
                        </form>
                    </div>
                    <div class="col-auto">
                        <hidden id=""></hidden>
                        <button id="" class="btn btn-outline-primary border-0 ms-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-middle" viewBox="0 0 16 16" style="">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
                                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
                                </svg>
                        </button>
                    </div>
                    <div class="col-auto form-group mb-0 search-field position-relative ps-2">
                        <span class="fa fa-search form-control-search"></span>
                        <input type="text" placeholder="Search" class="form-control text-muted search" id="">
                    </div>
                    <div class="col-auto ps-2">
                        <button class="btn btn-outline-primary border-0">
                            <i class="bi bi-grid"></i>
                        </button>
                    </div>
                                
                </div>
        </div>
        <div class="col position-relative bg-light" style="min-height: 0;">
            
        </div>
    </div>
</section>
</body>
</html>

Upvotes: 0

Views: 79

Answers (1)

Abregre
Abregre

Reputation: 480

EDIT I didn't read the question enough. The problem seems to be that col-auto adds the flex shorthand property

flex: 0 0 auto;

the last value(auto) is the flex-basis https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

In your code you have 2 columns with direction column, since the first column has flex-basis f "auto" and the second "0", the col-auto makes the first one get the extra space out of the parent row(h-100).

This side effect is only happening on desktop viewports

OLD ANSWER py-2 next to col-auto is causing this as it is an inner padding on the outter div


<div class="col-auto py-2 border border-danger bg-light-subtle">

remove py-2

Upvotes: -3

Related Questions