Creating a dropdown menu that seamlessly populates elements without any empty spaces

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

Answer №1

In order to achieve the desired outcome, it is important to take the following steps:

  1. Eliminate padding-left: 20px and padding-right: 20px from the .inactive-border-bottom selector;

  2. Include height: 100% in the following selectors - .control and .select.is-fullwidth.

  3. Create a new class called .full-height in your CSS file, and apply the rule height: 100%!important within it. The use of !important is crucial as it overrides the height: 2.5em rule present in the .select select element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS or Coding? Learn how to display items side by side instead of on top of each other

Hey there! I manage a music website that is currently in beta. I'm running into an issue with the way the music results are appearing in the bottom player - they're all stacked on top of each other instead of being listed side by side. I've ...

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...

Utilize PHP to import an HTML file with JavaScript code into MySQL database

I've been attempting to use JavaScript to retrieve my location, but I'm facing an issue where when I click submit, the data is not getting entered into the page action.php. geolocation.php <form action="action.php" method="post"> < ...

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

Updating JQuery function after window is resized

click here Currently, I am using slick-slider to showcase content in 3 columns by utilizing flexbox. The aim is to have the slider activated only on mobile view. This means that when the screen size shrinks down to mobile view, the 3 column flexbox transf ...

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

How can I change a div element in a click event handler, while ensuring that PHP code inside the element remains intact and does not get moved into an HTML comment? You can find my code snippet below: $("#replaceCat1").click(function(){ $("div.boxconte ...

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

Utilizing a single controller in multiple locations within AngularJS

I am currently working on developing an Ionic application which includes screens with lists containing checkboxes and the option to select all items. My experience with AngularJS and Ionic is fairly limited. The "Select All" functionality works as intende ...

Utilize CSS scrolling to present all items in a single line

Looking to showcase images in a horizontal line with scroll functionality? Unsure of how to achieve this and would really appreciate some guidance. CSS .img { max-width: 400px; position: relative; } .animal { float: left; background-color: #fff; ...

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

Looking for an xpath to target elements within a neighboring table

I am having trouble creating an xpath expression to find the text located in the span tag that contains text to locate in the second portion of the xpath. The text should be found by first locating an image inside a table row within a table data cell in a ...

Adjust Image Crop on Bootstrap Carousel as Browser Width Shrinks

I have a carousel with background images similar to this website I need the images in my carousel to stretch to 100% of the browser width. When the user adjusts the browser size, I want the image to be cropped on the right and left sides without changing ...

Make sure to trigger a callback function once the radio button or checkbox is selected using jQuery, JavaScript, or Angular

I'm looking to receive a callback once the click event has finished in the original function. <input type="radio" onchange="changefun()" /> function changefun() { // some code will be done here } on another page $(document).on('input: ...

Display picture within a modal window, regardless of whether it is the identical image

I have a file input that allows the user to upload an image. After selecting an image, a modal opens with the uploaded image displayed inside. You can view a demo of this functionality in action on this Fiddle Example: Here is the corresponding code snip ...

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

"Offspring div popping up beyond the bounds of its parent div

I've been working on a project where I need to insert a div containing an image into another div. The parent div already has two other child divs set up and functioning perfectly. Here is the HTML code for the parent and child divs: <div id="conte ...

The top section of the page is not properly aligned with correct bootstrap spacing and margins, leading to a

Inspiration theme: Porto (The work items on the right are aligned with the top of the viewable portion of the page) when selecting 'view all' on the left menu. Website using the Porto template: DMMBlitz (The work items on the right are NOT alig ...

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

Focusing on a text field after reloading a different div with AJAX

I've been spending a lot of time figuring out the following issue and I'm hoping someone can help me find the solution. My web application has an input field (type="text") that is ready to accept user input when the page loads. When the user nav ...