Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

Question

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected.

Can anyone guide me on how to achieve this?

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-md-4 .col-sm-8 .col-sm-4{
    border: 1px solid;
    display: block;
}

Current outcome:

https://i.sstatic.net/in5MA.png

Desired outcome:

https://i.sstatic.net/yKTU8.png

Stackblitz demo

html css twitter-bootstrap bootstrap-4 dropdown

Answer 1

Answer №1

I'm not certain about the possibility of styling the traditional dropdown list to occupy space on the webpage. Therefore, I have presented an alternative solution that will meet your requirements using a custom dropdown.

Take a look at this:

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

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

// Event listener for selecting an option
dropdownList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    const selectedOption = event.target.textContent;
    
    // Dropdown value
    const selectedOptionValue = event.target.getAttribute('value');
    
    // Display the selected option in the button
    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 retrieve the dropdown value from the selectedOptionValue variable.

Answer 2

I'm not certain about the possibility of styling the traditional dropdown list to occupy space on the webpage. Therefore, I have presented an alternative solution that will meet your requirements using a custom dropdown.

Take a look at this:

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

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

// Event listener for selecting an option
dropdownList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    const selectedOption = event.target.textContent;
    
    // Dropdown value
    const selectedOptionValue = event.target.getAttribute('value');
    
    // Display the selected option in the button
    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 retrieve the dropdown value from the selectedOptionValue variable.

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

Answer №1

Similar questions

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

Unable to conceal adjacent radio buttons

Bootstrap design malfunctioning in Firefox browser

Having trouble loading CSS in an express view with a router

Conceal and reposition divs based on device with Bootstrap's responsive utilities

horizontal alignment of row content to the right in HTML

Resolving Div Alignment Issues in Internet Explorer with jQuery CSS AddClass and RemoveClass

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Ways to expand the div to fit the width of the text after it has been wrapped

Resize the tab header in primefaces to fit your needs

What is the best way to ensure Font-Face loads fonts successfully on iOS devices?

JavaScript making a request to a web service

CSS vertical text not functional as expected

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Scrapy and Python data gets corrupted by <br> tags causing issues

The HTML button triggers a function to execute on a different webpage when clicked

Do you think there might be an issue with the CSS coding?

What is the best way to ensure that Bootstrap 4 utilizes the full width of the screen?

Can the Live Search fields be cleared?

What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?