Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page.

div.container {
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow-y: scroll;
}

.filter_container {
  padding: 40px;
}

.index_filters_selected__NkclA {
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  background-color: #eceff4;
  border-radius: 8px;
  padding: 8px;
  width: fit-content;
}

.modal_sub_menu {
  position: absolute;
  border: 1px solid #d6d9e5;
  border-radius: 8px;
  padding: 24px;
  background-color: #ffffff;
  z-index: 55;
}
<div class="container">
  <div class="filter_container">
    <div class="index_filters_selected__NkclA ">
      <span>Subject</span>
      <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);">
            <path d="M2.25 5L6 8.75L9.75 5" stroke="#3D4252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
    </div>
    <div class="modal_sub_menu">
      <form>
        <div class="filters_forms_filters_form__SbQTV">
          <label for="email_subject">
                  <div class="label">Subject </div>
                  <input type="text" placeholder="Subject" id="email_subject" class="" value="">
               </label>
          <div><button type="button" class="cancel_button">Cancel</button><button type="submit">Apply</button></div>
        </div>
      </form>
    </div>
  </div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</span>pidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

https://jsfiddle.net/mplante/1xpszjb2/53/

Thank you for your assistance!

Answer №1

Ensure that .filter_container has a position: relative property set in order to establish it as the reference point for any absolutely positioned submenu elements.

div.container {
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow-y: scroll;
}

.filter_container {
  padding: 40px;
  position: relative
}

.index_filters_selected__NkclA {
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  background-color: #eceff4;
  border-radius: 8px;
  padding: 8px;
  width: fit-content;
}

.modal_sub_menu {
  position: absolute;
  border: 1px solid #d6d9e5;
  border-radius: 8px;
  padding: 24px;
  background-color: #ffffff;
  z-index: 55;
}
<div class="container">
  <div class="filter_container">
    <div class="index_filters_selected__NkclA ">
      <span>Subject</span>
      <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);">
            <path d="M2.25 5L6 8.75L9.75 5" stroke="#3D4252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
    </div>
    <div class="modal_sub_menu">
      <form>
        <div class="filters_forms_filters_form__SbQTV">
          <label for="email_subject">
                  <div class="label">Subject </div>
                  <input type="text" placeholder="Subject" id="email_subject" class="" value="">
               </label>
          <div><button type="button" class="cancel_button">Cancel</button><button type="submit">Apply</button></div>
        </div>
      </form>
    </div>
  </div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</span>pidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

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

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

Display additional content button, dynamic div identification

I've created a small script that includes a "show more" button at the end of displaying 10 entries. Here is the code: <div id="more<?=$lastid;?>"> <a onclick="showmore(<?=$lastid;?>);">More</a> </div> And here ...

retrieve all the table data cells except for the initial one

I have a specific table structure that I need to work with: <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td&g ...

The functionality is not operating correctly on Internet Explorer

This code is functioning properly in Mozilla and Opera, but it is not working in IE. Any assistance on this issue would be greatly appreciated. The JavaScript is working fine, however, in IE 10 only the back panel is displayed. Thank you for your help. h ...

Retrieve input value from a jQuery template

I've created a template <div id="template" style="display: none;"> <strong>Name</strong>: <span class="name"></span><br/> <input type="number" id="amount"> <button type="button" onclick="App.submit ...

Issue with CSS on various mobile devices

Using this CSS to display a fixed part at the bottom of the mobile screen, I noticed that it works well on the Samsung Grand Prime but appears narrower on the Samsung J7 Max. Here is the code snippet and images for reference: .footer { position: fixed ...

Tips on how to loop a song continuously in jPlayer's circular mode

Can you help me figure out how to make a song repeat in jPlayer circle? I have the code for autoplay, but I also want to add a repeat functionality. I tried adding options like repeat:, but it didn't work as expected. <script type="text/javascript ...

Is it possible to stop the manipulation of HTML and CSS elements on a webpage using tools similar to Firebug?

How can we prevent unauthorized editing of HTML and CSS content on a webpage using tools like Firebug? I have noticed that some users are altering values in hidden fields and manipulating content within div or span tags to their advantage. They seem to be ...

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

Is it possible to execute a program on MacOS through a local HTML website?

Are there any straightforward methods to launch Mac programs using HTML? I've created an HTML page featuring a text field and several buttons. The goal is for users to enter a code (numbers) that will then be copied to the clipboard. By clicking on t ...

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

I am currently working on incorporating a Bootstrap 4 carousel into my application, but I seem to be encountering issues with the indicators. Ideally, clicking on any of them should navigate you to the corresponding photo, similar to this example: https:// ...

Responsive HTML and CSS Image Gallery without Clickable Images

As I embark on the creation of an HTML and CSS based Gallery, I am eager to make my images more interactive by enabling them to expand into full-screen mode upon clicking. Is it necessary for me to incorporate additional plugins to achieve this functiona ...

The entire space on an HTML page should be occupied with content from the header to the footer

I am currently implementing jQuery Mobile on my project. The page I have created consists of a fixed header and footer with only two buttons. Due to the fixed footer, half of the page is in silver color (data-theme=c) while the bottom half is gray. My goa ...

Dynamic value for textbox using Selenium

While working on building a test case, I encountered a problem with a search text box on my web page. The Selenium IDE was used to record the actions taken. type | id=search_input_char_name_136 | myproduct // textbox for search click | css=button.oe_ ...

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

I am interested in designing an arrow shape with the help of CSS. Kindly refer to the

Can someone assist me in creating a CSS arrow shape that resembles the one shown in this screenshot? Also, I am looking to create next and previous post buttons similar to this. Any guidance would be appreciated. ...

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Just starting to learn ASP.NET MVC and I've noticed that it generates controls like @Html.TextBoxFor(x => x.Name) which resemble server-side controls in web forms. Since browsers only understand HTML, these controls need to be converted to HTML bef ...

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

Tips for modifying a text input in a list

Managing comment boxes and buttons for each box can be a bit tricky. Clicking on the edit button should enable only that specific textbox, while save or cancel actions should hide the text box and show "<p></p>". Below is my ng-template where ...