Tips for positioning a React component above another component

I am currently facing a challenge while working on a table with an expand more option to display additional details for each specific row. I have implemented a slider to facilitate the expansion of the table. Presently, my ExpandToggle component is embedded within the columns of the table, causing the table to expand to the left and push the data. Instead, I wish to position the 'ExpandToggle' component to cover the Fat(g), Carbs(g), and Protein(g) rows, overlaying them on top of the table without displaying the data from those three rows or stretching the table.

To demonstrate this issue further, I have created a sample on CodeSandbox.

This is how it currently appears:

https://i.stack.imgur.com/DE85r.png

Here is the code snippet for the table body:

<TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">>{row.carbs}</TableCell>
              <TableCell align="right">>{row.protein}</TableCell>
              <TableCell align="right">>
                <ExpandToggle />
              </TableCell >
            </TableRow>
          ))}
        </TableBody>
javascriptcssreactjscomponentsmaterial-ui

Answer №1

As mentioned by @Aditya, it is recommended to override the styles for the SliderInfo component and possibly incorporate a tooltip with the use of the position property in the following manner:
SliderInfo.js 

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#E2F1F1",
    position: "absolute",
    bottom: "0%",
    left: "-360%",
    height: "100%",
    width: "400%"
  },
  listItem: {
    divider: true
  }
}));


demo.js 

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  cc: { position: "relative" }
});



 <TableCell
                classes={{
                  root: classes.cc
                }}
                align="right"
              >
                <ExpandToggle />
              </TableCell>

Here's a link to a helpful sandbox showcasing this concept.

Answer №2

To customize this component, you will need to override the styles for MuiTableCell and use the class name MuiTableCell-root. MaterialUI provides detailed documentation on customizing its components, which can be found at https://material-ui.com/customization/components/. If you require any help with this, feel free to reach out.

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

Is there a way for me to implement my custom CSS design within the Material UI Textfield component?

I have a project in Next.js where I need to create a registration form with custom styles. The issue I'm facing is that I'm struggling to customize a textField using my own CSS. I attempted to use the makeStyles function, but encountered a proble ...

cssreactjsmaterial-uinext.js

Customizing the direction of the Stepper component in React.js using Material UI

I'm facing an unusual challenge where I'm attempting to create a stepper component for my application. Everything is working smoothly so far, but I want the stepper to progress from right to left. Here's what I've tried: Installed i18n ...

javascriptreactjsmaterial-uifrontend

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

The URL for the Javascript chunk includes colons at https://example.com/js/chunk-vendors.b3792e11.js:18:16400

I recently completed a Vue application and used npm run build to generate the files. Upon uploading the dist folder to my Apache server, I encountered an issue where Apache was unable to locate the file when trying to access a specific part of the app (:18 ...

javascriptapachevue.jsnpm

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

htmlcsspositionoverflow

What is the best way to display a button only during office hours from 9am to 5pm using React.js or JavaScript?

If I want a button to only be visible from 9am to 5pm, how can this be achieved where the button is hidden outside of that time frame? ...

javascriptreactjstime

Nesting maps in JavaScript is a powerful way to transform

I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...

javascripthtmlreactjsarray.prototype.map

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

javascripttypescriptnext.jsjestjs

Angularjs does not seem to be rendering content placed within curly braces

I'm working on setting up a page with Angular, and I'm facing an issue with displaying JSON data received from the server. Here is the code snippet: HTML <body ng-app="App"> <nav class="navbar navbar-dark bg-inverse navbar-fixed-top"& ...

javascriptangularjsjson

Is the state mutated when using the .map() function to update it?

I am new to working with React and I am still struggling to understand state mutation. After reading multiple posts on this topic, I am finding it difficult to grasp the concept of state mutation. So, I have decided to seek clarification on this matter. ...

javascriptreactjs

Exploring different preact.js configurations to set up a simple environment for debugging the source code

Exploring the depths of preact.js has proven to be quite a challenge. Despite successfully setting up the framework using webpack build from the preact-boilerplate setup, I am encountering difficulty in accessing and intercepting the code for debugging pur ...

reactjsnpmconfigurationwebpackpreact

Is it safe to remove the `async` keyword if there are no `await` statements in use

Forgive me if this is a silly question, but I'm considering removing the async function below since there are no await's. This code is part of a large production system, and I'm unsure if removing async could have unexpected consequences? (a ...

javascriptnode.jsexpressecmascript-6async-await

Verify information and send messages using JavaScript validation

I need assistance with my HTML form and JavaScript code. I am trying to send a parameter from the form to JavaScript in order to check if the input matches any values in an array. If there is a match, I want an alert message to be sent. However, the issue ...

javascripthtml

Changing the information of objects stored in arrays using React Three Fiber

My challenge is with an array of roundedBox geometry shapes called myShape. I am trying to figure out if it's possible to change the position of one of the shapes within the array without creating a new shape altogether. Ideally, I would like to updat ...

javascriptreactjsthree.js

Seeking the "onChange" functionality while implementing the "addEventListener" method

I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...

javascripthtmlreactjs

What is the best way to click on a particular button without activating every button on the page?

Struggling to create buttons labeled Add and Remove, as all the other buttons get triggered when I click on one. Here's the code snippet in question: function MyFruits() { const fruitsArray = [ 'banana', 'banana', & ...

javascriptreactjstypescriptreact-hooks

Creating a Custom Rule for Checkbox Validation using jQuery

Can the jQuery Validation plugin be used to validate custom values on checkboxes, rather than just True or False? For instance: <input id="test" type="checkbox" name="test" value="something"> I am struggling to find a method that can check if &apo ...

javascriptjqueryvalidation

tips on launching a pre-existing react native project

Trying to run a project downloaded from someone else can be quite challenging. I encountered some issues where the project just wouldn't start, and now I'm completely stuck. Can anyone help me out? https://github.com/sunlight3d/react_native_v0.4 ...

javascriptandroidwindowsreact-nativenpm

Expanding and shrinking the index within a specific circular boundary in JavaScript

I'm dealing with a circular range of ASCII values from a to z, where each letter corresponds to a number between 97 and 122. I have no issue with increasing the value within this range, but I am struggling when it comes to decreasing it. For example ...

javascriptnode.js

Importing GeoJSON data into Meteor's Leaflet

Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map The implementation requires the use of this GeoJson Data file: us-states The o ...

javascriptjsonmeteorleafletgeojson