Question 219114 in CSS Question posted in
Some basic documentation can be found here.

Css – How to fix bootstrap column height issue

I have one dropdown inside bootstrap grid .If i click the dropdown the height of the row also increase. But, Here not increasing.How to do it?

HTML:

<div class="container">
<div class="row">
<div class="col-12"> 
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div> 
</div>
</div>

CSS:

.row{
 border: 1px solid;
 height:auto;
 }

.col-12{
  border: 1px solid;
  display: block;
}

enter image description here

Expecting like below:

enter image description here

Demo: https://stackblitz.com/edit/angular-bootstrap-grid-system-z8bqwk?file=src%2Fapp%2Fapp.component.html

Tags:

2

Answers


  1. 0

    CSS properties are inherent to flexbox. Columns in a Bootstrap row will have the same height by default.

    If you need to ensure that the contents of your dropdown can overflow beyond the limits of the row, you should set the min-height to a minimum amount to show it.

    Something like this:

    .row{
   border: 1px solid;
   min-height: 1px; /*<---- Here where you need at least 1 pixel for the border to show */
}

.col-12{
  border: 1px solid;
  display: block; /* This one is unnecessary since bootstrap already applies it by default.  */
}

select {
  width: 100%;
  height: auto;
}
    Login or Signup to reply.
  2. 0

    I am not sure if you can style the native dropdown list so it’s options take space on the page, so I provided an alternative with your desired outcome using a custom dropdown.

    Check this:

    // Get all elements needed
const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownList = document.querySelector('.dropdown-list');

// Event listener to toggle the dropdown list visibility
dropdownBtn.addEventListener('click', () => {
  dropdownList.classList.toggle('show');
});

// Event listener for option selection
dropdownList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    const selectedOption = event.target.textContent;
    // Display the selected option in the button
    
    // dropdown Value
    const selectedOptionValue = event.target.getAttribute('value');
    
    dropdownBtn.textContent = selectedOption;
    // Hide the dropdown list after selection
    dropdownList.classList.remove('show');
  }
});
    .row {
     border: 1px solid;
     height:auto;
 }

.col-md-4 .col-sm-8 .col-sm-4{
    border: 1px solid;
    display: block;
}


/* Basic styling for the dropdown container */
.custom-dropdown {
  position: relative;
  display: inline-block;
}

/* Styling for the dropdown button */
.dropdown-btn {
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* Styling for the dropdown list */
.dropdown-list {
  position: relative;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Styling for the dropdown list items */
.dropdown-list li {
  padding: 10px 20px;
  cursor: pointer;
}

/* Show the dropdown list on hover/focus */
.custom-dropdown:hover .dropdown-list,
.custom-dropdown:focus-within .dropdown-list {
  display: block;
}
    <div class="container">

    <div class="row">
        <div class="col-12">
          <div class="custom-dropdown" name="cars" id="cars">
          <button class="dropdown-btn">Select Option</button>
          <ul class="dropdown-list">
            <li value="volvo">Volvo</li>
            <li value="saab">Saab</li>
            <li value="opel">Opel</li>
            <li value="audi">Audi</li>
          </ul>
        </div>

        </div> 
    </div>
</div>

    You can access the dropdown value in the variable selectedOptionValue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search