Is there a way to position autosuggest suggestions above the dialog instead of within it, in order to prevent scrolling of dialog content?
Check out this sandbox example for reference: https://codesandbox.io/embed/adoring-bogdan-pkou8https://i.sstatic.net/Zxp5T.png
If you are unsure about the libraries being used, consider adding a style of overflow: visible to the outer dialog div element with the class name
MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-roundedMuiDialogContent-root div element may benefit from having overflow-y: unset.
In my experience, implementing these modifications in the code sandbox has proven successful.
The rationale behind this adjustment is that the dialog restricts anything that vertically overflows its boundaries and introduces a scrollbar for such instances. Because the autosuggest component resides within the dialog component in terms of the DOM and is positioned as absolute, it becomes truncated when exceeding the dimensions of the dialog box. By instructing the dialog not to crop its content or conceal overflowing content via scrolling, the autosuggest component can properly overflow. However, this approach also means that scrolling inside the dialog is no longer feasible.
An alternative suggestion would be to allow the autosuggest component's root element to attach to the body and position itself relative to the input field. This way, there is no need to manipulate overflows, as the autosuggest is essentially positioned "above" the dialog component in the DOM hierarchy.
https://i.sstatic.net/CGCPW.png https://i.sstatic.net/jKLjk.png
Make sure to set a maximum height for the Paper component displaying the suggestions.
renderSuggestionsContainer={options => (
<Paper style={{'maxHeight':100, overflow:'auto'}} {...options.containerProps} square>
{options.children}
</Paper>
)}
What am I trying to achieve? I want to create a single product page that displays custom fields which need to be filled out before the item can be added to the cart. Additionally, I have implemented a button that should take all the values entered in the ...
I am currently working with a snackbar component in my application: const handleExited = () => { console.log('snackbar exited'); }; const slideTransition = (props) => { return <Slide {...props} direction='right' onEntere ...
I am trying to organize my data by creating an array and listing each material based on its status. Here is the structure of my current array: let data = [ { Name: 'House 1', Details:[ {Materials: ...
After some research, I discovered that React handles DOM event handlers using SyntheticEvent objects. These objects are pooled for performance reasons, but they cannot be used in asynchronous contexts like setTimeout() or setState(). Despite this limitat ...
I am currently utilizing the Bootstrap-vue Table for filtering purposes, and I require assistance in implementing a regex filter to exclude words or letters with accents. Here is the regex snippet: string.replace('/[áàãâä]/ui', 'a&apos ...
I am currently utilizing angular1 in conjunction with browserify and grunt to construct my application. At present, browserify only bundles the controllers and retrieves the templates using ng-include through a separate ajax call. Due to the excessive amo ...
I am facing an issue with a table where 2 columns are hidden by the dataTables api. When I delete a row, I need to send the data from these columns via ajax to remove it from the database. In the past, I had no problem deleting rows that didn't conta ...
Currently, I am working on a project using Angular and encountered an issue with testing the page speed on GTmetrix. Despite generating the build with the command ng build --prod--aot, the file size is 1.9mb, leading to a low speed in GTmetrix's analy ...
I have been trying to integrate the select2 plugin into my project. I followed a tutorial from this link, but unfortunately, it's not functioning properly for me. Here is the JSON output: [ {"ime":"BioPlex TM"}, {"ime":"Aegis sym agrilla"}, ...
When I click the button, I am executing this function. Despite adding a header in my API, an error is still being displayed. Here is the code snippet for the function: let getData = () => { console.log("getData function started"); ...
Currently, I am developing a dynamic formula generator using jQuery's drag and drop functionality. Here is what I have accomplished so far: I have two lists: <ul id="head"> <li class="horizontal">Salary</li> <li class="h ...
My API returns datetime in the format '2021-12-31T16:00:00.000Z' I need to use DateTimeInput and consistently show it in UTC+8 timezone. After the user submits the form, it should convert back to the original format '2021-12-31T16:00:00.000 ...
Apologies for the poorly worded question, but I'm struggling to find a better way to phrase it. I'm currently working with a .each() loop where I need to update a specific css() parameter of each item in the loop. However, I can't seem to g ...
Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...
I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...
Hey there, I am facing an issue with my slider. If you could take a look at this website , you will notice that after clicking on the arrows, the slider behaves asynchronously. It changes speed rapidly at times and then slows down, repeating this pattern ...
Initially, I attempted to pass the object :id to the URL and it was successful. However, when I tried to pass the object to the list, I encountered a ReferenceError. index.ejs: <tr> <th class="text-center">AWB NO</th> <th c ...
My goal is to create a display that shows values from 2 text inputs and an image array (using expo image picker) every time data is added, similar to a todo app. I am not encountering any errors when adding the data, but the display remains empty and does ...
I am currently working on creating a Login / Register form using react for the client-side and node / express / (mongo) for the backend. The backend functionality is working smoothly as expected, with successful storage of credentials in the database upon ...
I'm struggling to retrieve the latest private property from a Module, as I keep getting the initial value instead of the most recent one. Upon submission of the form and triggering onSuccess, I assign partnerId = 10. Subsequently, upon clicking an e ...