I recently added the Bootstrap dropdown-toggle button to my website. However, I encountered an issue where it does not expand to 100% width of the column it is placed in as required. Instead, it only expands to the width of the text or font within it. This results in situations where if the font size is increased, the button expands to 100% width but the text spills out of the button, as depicted in the image below.
https://i.sstatic.net/dF6gV.jpg
Conversely, when the font size is reduced, the button reduces its width proportionally to fit the font size, as shown in the following image:
https://i.sstatic.net/72o0c.jpg
I have tried various methods such as using width: 100%; and display: block;, as well as adding the btn-lg class to address this issue, but with no success.
Furthermore, the dropdown menu adjacent to the button uses a regular <a> tag instead of an <li> tag that I need for proper functionality on the left dropdown.
Below is the CSS code snippet that I implemented to style the button and attempt to set its size:
.my-dropdown-toggle-button {
border-radius: 1px;
font-size: 0.8em;
display: block;
width: 100%;
background-color: #f9f9f9;
height: 47px;
border: 1px solid #f2f2f2;
color: #079E94;
padding-left: 10px;
background-image: linear-gradient(to right,
#f2f2f2,
#f2f2f2 50%,
transparent 50%,
transparent);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .4s ease-in;
}
Here is how the HTML structure looks like with the layout included:
<div class="container-fluid shop-page-main-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"><!-- Subnav content -->
<div class="row">
<div class="col-6 col-md-12 col-lg-12 col-xl-12">
<div class="shop-page-subnav-box">
<h3>
Filter by Product
</h3>
<hr>
<div class="shop-page-subnav-box-dropdown">
<div class="dropdown">
<button class="dropdown-toggle my-dropdown-toggle-button btn-lg" type="button" data-toggle="dropdown">
By Product
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-12 col-lg-12 col-xl-12">
<div class="shop-page-subnav-box">
<h3>
Sort by Type
</h3>
<hr>
<select>
<option value="volvo"> By Type </option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>