Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over.

To achieve this, I added a simple popover component to the last cell of each row, along with a slide-in animation. However, the issue arises when the animation causes a horizontal scroll bar to appear in the table.

How can I remove this unwanted scroll bar?

Here is a link to my code sandbox: codesandbox

Additionally, I have another question regarding adding box shadows to the left and right sides of every table row. Currently, the box shadow only appears at the top and bottom of each row. How can I extend it to the sides as well?

htmlcssreactjshtml-tablematerial-ui

Answer №1

Regarding the initial query:

To address the horizontal scrollbar, it is advisable to implement an overflow hidden property (either overflow-x or overflow-y):

<Table sx={{ minWidth: 650, overflow: "hidden" }} aria-label="simple table">

For the subsequent inquiry, a solution like this could be helpful: https://codepen.io/michalkliment/pen/dWzwEG

Please limit each submission to one question only.

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

Exploring the world of three-dimensional graphics with the power of HTML5, canvas,

Here is the HTML markup I am working with: <canvas id="container" name ="container" width="300" height="300"></canvas> This is the JavaScript code: var WIDTH = 400, HEIGHT = 300; var VIEW_ANGLE = 90, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = ...

javascriptjqueryhtmlthree.js

Unable to Upload Image to MySQL Database

I encountered an unidentified index error when trying to upload images. I added a check to prevent the error, but the images are still not being uploaded. I have tested with legitimate images, but nothing seems to work. I've been struggling with this ...

phpmysqlhtml

Why is my table shifting when I go into fullscreen mode? Any ideas?

Can anyone explain why my project appears like this on a small tab, check image linked here But when it's full-screened, it looks like this: check image linked here The CSS for my grid is as follows: .table{ position: absolute; margin-top: 37em; ...

reactjsmaterial-ui

Obtaining information upon the loading of a Modal in a Next.js application

I am currently developing a feature for my application that allows users to add a new project to a timesheet system. To achieve this, I have created a Modal with a form inside. The form includes a Select field that should display all existing user names f ...

reactjsreact-hooksnext.jsfetch-api

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

htmlw3c-validation

Is window.getComputedStyle not functioning as anticipated?

Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...

javascripthtmlcss

Chrome is experiencing compatibility issues with Datatable

I'm encountering an issue with Datatables and I'm at a loss on how to resolve it. In my custom cms, Datatables functions perfectly on my Mac (Safari, Chrome, Firefox) and also works seamlessly for my colleagues on Windows machines. However, we ...

jqueryhtmlgoogle-chromedatatable

Is it better to convert Sketch designs to React Native using a tool or hire a coding shop?

I am currently collaborating with a couple of friends, who are very experienced in other frameworks, on a brand new React Native app. Our main goal is to establish an efficient workflow for transitioning from Sketch (or any other modern design tool) into R ...

reactjsreact-nativemobilesketchapp

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

After creating this fiddle, I noticed that my webpage layout with two texts stacked on top of each other looks great on wide screens. However, when the screen size is reduced or viewed on a mobile device, the layout gets all messed up. Take a look at this ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for modifying the height of a bootstrap-vue table and enabling scrolling with a fixed header

I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code: Code inside the template: <div class="tbl-barangay"> <b-table stripe ...

htmlcssvue.jsbootstrap-4bootstrap-vue

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Alert: VirtualizedList warns of slow updates for a large list despite optimized components

Struggling with avoiding the warning message "VirtualizedList: You have a large list that is slow to update" while utilizing the <FlatList> component in React-Native. Despite thorough research and attempts at finding a solution, including referencin ...

javascriptreactjstypescriptreact-native

Low-quality CSS Gradient Design

Hey everyone, Feel free to take a look at my preloader on this link: (Hit ESC as soon as the page loads to pause the website and focus on the loader) Upon closer inspection, you'll notice that there is an issue with the quality of the background l ...

htmlcsslinear-gradients

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

Comparing GET and POST actions in mod_rewrite search form

Hey there, thank you for taking the time to address this query. I have implemented a live search form using jQuery on my website. The search bar is present on every page and functions well. Now, I am looking to enhance its functionality. When users press ...

phphtmlmod-rewrite

Rendering JSON responses in React.js can be achieved using either the fetch function or axios library

I've spent way too much time struggling and I can't seem to concentrate anymore. My goal is simple - I just want to fetch JSON data from a URL and display it visually in the browser. It doesn't even have to be formatted, at least not until ...

jsonreactjsfetchaxiosco

The printing feature in javascript does not include the ability to print values from textboxes

I'm encountering an issue when trying to print an HTML table with textboxes that should get their values from another function. However, the preview is not showing anything. Below is the complete code: <html> <head></head> < ...

javascripthtmlfunction

Using jQuery to choose options and change the background color

Hey there, I have a select box below: <select id="events"> <option value="1" style="background-color:green;">Event 1</option> <option value="2" style="background-color:yellow;">Event 2</option> <option value="3 ...

javascriptjqueryhtmlselect

Retrieving data from a Ruby class based on a specific condition

Currently, I have a code snippet that adjusts the formatting of an editing page based on the number of values a question contains. <% (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aa9b8484eadbdfcfec8cdcac3c5c484dbc6ece0 ...

htmlruby-on-rails

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

htmlcss