Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down?

To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx

Simply click on the select and start scrolling down. Notice how the menu items move down while you scroll, but I would like them to stay fixed with the select element. Ideally, as I scroll down, the menu items should move up and eventually disappear just like the select does.

Answer №1

The options on the menu are enclosed in a dialogue box marked with the unique identifier menu-. The dialogue is configured to maintain a position of fixed, ensuring it remains on screen while scrolling. To produce this outcome, utilize the subsequent CSS class:

#menu- {
  position: absolute;
}

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

The function responsiveTable does not exist

I recently added the following code to my aspx page: <script src="../Scripts/jquery.responsivetable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#grdStudent').responsiveTable( ...

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

Creating a counter for a list using CSS

I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...

Passing inline CSS styles from parent component to child component in Vue

I am currently using vue.js with vuetify, and I need to position a button on top of a canvas component (managed by the Konva library). I successfully achieved this by using absolute positioning for the button. However, in order to organize my code better, ...

Developing client-side components with NextJS

I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...

What is the best way to convert the javascript code into clojurescript?

Looking to utilize capacitor/app in order to determine the state (background or active) of my iOS app. My project is built on Clojurescript, so I need to convert the following javascript code into a clojurescript equivalent. Javascript import { App } fro ...

Tips for creating a pop-up window on an ASP.NET web form

I am looking to incorporate a popup window as a child of my primary asp.NET form. The popup window will allow users to input information using a dropdown list. When the popup window appears, it will take focus and disable the main window. ...

Tips for sending information from a controller to jQuery (Ajax) in CodeIgniter

Code snippet in controller: $rates['poor'] = 10; $rates['fair'] = 20; $this->load->view('search_result2', $rates); //Although I have attempted different ways, the only successful method is using the code above. Other ...

Struggling to send the correct cookies to the API server using Next.js

I have set up an API express server on api.mydomain.com and a Next.js website on mydomain.com. My Next.js application uses getServerSideProps to request data from the API for displaying on the page. However, I am facing an issue where I can set cookies for ...

Rendering child components in Vue.js with access to parent data

I have a main component in Vue.js with the following structure: <template> <ul class="list-group"> <li class="list-group-item" v-for="item in items"> <div class="row"> <div class="col-md-6"> ...

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

View the picture in a web browser

Currently, I am faced with the challenge of displaying an image that is stored in an MSSQL database created by another person. The column was originally of type IMAGE, but I converted it to varbinary(MAX) using Sequelize. Although I lost some data during ...

Exploring an object of arrays with jQuery

I have a straightforward object with some basic arrays. My goal is to iterate through each item in the object and check a specific part of the array. For instance, if it contains '0' or '1', I need to perform an action. var formvalidat ...

In Javascript, check if an item exists by comparing it to null

I am working with a dropdown list that can be used for various types of data. Some of the data includes an isActive flag (a BOOLEAN) while others do not. When the flag is absent, I would like to display the dropdown item in black. However, if the flag exis ...

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

I am trying to implement a drag and drop file feature on my webpage, but for some reason, it's not working as expected. The drop zone is supposed to change its background color when I drag a file onto it, but that functionality doesn't seem to be ...

Using jQuery idle timeout to abort jQuery AJAX calls in Laravel 5.2

Currently, I have implemented the jQuery Idle Timeout plugin in my Laravel 5.2 system. Everything works perfectly on my local setup using MAMP Pro, but upon uploading it to the development server, I encountered an "Aborted" error in the AJAX get request: ...

I am facing issues with my submit buttons as they are not functioning

Once I hit the submit buttons, there seems to be an issue with redirecting to another page. Could anyone assist in identifying the error within this code and why my buttons "typ1" and "cod" are not redirecting to the specified location? <?php inc ...

Model is updated by checkbox only on the second click

Take a look at this Plunkr example here: http://plnkr.co/edit/hwVL3xtnD9hGJL?p=preview After clicking the checkbox for the first time, the model fails to update. Can you explain why? var app = angular.module('main', ['ngMaterial']) ...