CODEWITHSUNDEEP
htmlcss
seriously
seriously

Reputation: 1377

Set height of main container equal to its content

I have a wrapper that has a dropdown element. The wrapper has a height of fit-content. Currently the wrappers height is equal to the input elements height found in the drop down but it ignores the height of the ul in the drop down. How can I make the height of the wrapper equal to the height of the input plus the height of the ul? Thanks in advance.

.wrapper {
  width: 95%;
  height: fit-content;
  padding: 1%;
  background-color: saddlebrown;
}

.wrapper .dropdown {
    width: 100%;
    height: fit-content;
    background-color: aqua;
}

.wrapper .dropdown input {
    width: 100%;
    border: 1px solid #000000;
}

.wrapper .dropdown ul {
    display: block;
    width: 100%;
}

.wrapper .dropdown ul li a {
    cursor: pointer;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="wrapper">
  <div class="dropdown">
    <input class="form-control" placeholder="Locate your item" />
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">Item 1</a></li>
      <li><a class="dropdown-item">Item 2</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Views: 93

Answers (2)

Preetam Sharma
Preetam Sharma

Reputation: 79

You are facing this problem because according to the bootstrap class "dropdown-menu" CSS is set to be position: absolute; but in your case you need it to be position: relative; so that your wrapper class can consider this <ul> as its child element.

So you need to add some CSS to make your <ul> as position: relative;.

Current CSS for <ul> is:

.wrapper .dropdown ul {
    display: block;
    width: 100%;
}

change it to

.wrapper .dropdown ul {
    display: block;
    width: 100%;
    position: relative;
}

Upvotes: 1

mandana zare
mandana zare

Reputation: 26

.wrapper .dropdown ul {
    display: block;
    width: 100%;
    position: relative
}

Upvotes: 1

Related Questions