My team at the company is using a menu created by another developer. I recently added a dropdown selection to the first item on the menu, but I've run into an issue where the dropdown box does not fully fill the item, and I can't seem to fix it.
Here is the HTML code snippet:
<div class="main-container-top-menu scroll1" id="main-container-top-menu">
<div class="top-menu-item-container-empty">
<div style="width: 50px"></div>
</div>
<div class="top-menu-item-container">
<div class="inactive-border-bottom">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth ">
<select class="full-height">
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
<div class="top-menu-item-container" >
<div>
<div class="top-menu-item">2. Lot and Model</div>
</div>
</div>
<div class="top-menu-item-container" >
<div [className]="ishpExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">3. Home Plan</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isupgExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">4. Upgrades</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isnextExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">5. Next Steps</div>
</div>
</div>
<div class="top-menu-icon-container">
<i class="fas fa-print top-menu-icon"></i>
<i class="fas fa-share-alt top-menu-icon"></i>
</div>
</div>
And here is the corresponding CSS styling:
.scroll1::-webkit-scrollbar {
width: 0px;
height: 3px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
... (CSS styling continues)
You can view the working example on jsFiddle.
If anyone has suggestions on how to make the dropdown fill the menu without any gaps, please let me know!
Update
The text has been shifted to the left as shown in this image: https://i.sstatic.net/HpszT.png