Creating a dynamic child dropdown that expands to fit a table-cell parent element in MUI

I'm facing an issue where I have a parent element set to display as table-cell, and within it, I have a dropdown child element that I want to expand to occupy the entire available space within the parent element. Despite trying various solutions such as setting the child element's width to 100% or adjusting its display and positioning properties, I am still unable to make it fill the entire space.

You can see the problem in action in this sandbox: https://codesandbox.io/s/serene-hermann-b61vwr?file=/src/App.js

The size of the dropdown does not match that of the table cell, resulting in a strange appearance. How can I resolve this issue?

Answer №1

The problem lies in the padding of the table header cells conflicting with your dropdowns. To resolve this, you will need to apply a custom style to the header cells that contain dropdowns.

There may be a more elegant solution within your code, but the following approach should get you started. This will ensure that the dropdowns occupy the full width of their corresponding cells. Check out this example:

Derived from StyledTableCell:

const StyledTableDropdownCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    borderBottom: 0,
    border: "1px solid black",
    align: "center",
    padding: 0 // <--- Updated padding for table header cells
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14
  }
}));

table.js

<StyledTableRow>
  {tableHeadData.map(({ label, align, rowSpan, colSpan }, index) => {
    console.log({ label, index });
    if ([0,1].includes(index)) { // <--- There could be room for improvement here
      return (
        <StyledTableDropdownCell
          key={index}
          align={align}
          rowSpan={rowSpan}
          colSpan={colSpan}
        >
          {label}
        </StyledTableDropdownCell>
      );
    }
    return (
      <StyledTableCell
        key={index}
        align={align}
        rowSpan={rowSpan}
        colSpan={colSpan}
      >
        {label}
      </StyledTableCell>
    );
  })}
</StyledTableRow>

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

Issue with Custom CSS Class Not Displaying Correctly

I have implemented some unique CSS styles on a group of posts. You can view the site here. Upon inspecting the CSS classes of the posts, you will notice that the last two classes are .floats and .colThree. .colThree is being applied correctly with no issu ...

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

Bringing in a variable from a React component to a JavaScript file

I've created a React component called Button with two states named name and players. Now, I need to access these states in a separate JavaScript file that is not a component. Below are the relevant code snippets: Button.js import {useState} from &qu ...

Warning message in ReactJS Material UI Typescript when using withStyles

I am facing an issue even though I have applied styling as per my requirements: Warning: Failed prop type validation- Invalid prop classes with type function passed to WithStyles(App), expected type object. This warning is originating from Wi ...

The NextJS routing feature displays the [slug] parameter in the URL

I am encountering an issue with my NextJS app's folder structure: - pages - docs - [slug] - index - [id] - index These pages are intended to be dynamic, displaying data dynamically on the UI. This means that users can navigate t ...

Media query causing margin on previous div due to padding on following div

Currently experimenting with media queries and trying to make my tags span 100% the width of the device. However, I'm noticing a margin on the right side of my image. I suspect it's due to the padding on the div above, as when I set the padding t ...

Issues with the functionality of the Customer ListItem on a Selectable List have been identified within the material-ui framework

When using the Selectable List, I encountered an issue where if I wrote a custom list item, the list wasn't selectable. However, when I used the list item directly, it was selectable. var DataCenterRow = React.createClass({ render: function () { ...

Fix the issue of the screen bouncing around when the scroll bar is visible

When my modal popup appears on screen, I am using the CSS property overflow: hidden to eliminate the scrollbar. To ensure that the screen does not shift when the scrollbar disappears, I am calculating the scrollbar width using JavaScript and adding paddin ...

Achieving perfect vertical alignment for both single and multi-worded links

Is there a way to vertically center single and multi-worded links in a horizontal navigation bar? Currently, the multi-worded links appear centered while the single worded links float to the left. I attempted to adjust the width of ul li a and ul li.colour ...

When using Visual Studio Code debugger on a React project with TypeScript, breakpoints are not being triggered

I've been utilizing the Debugger tool in VS Code and my launch.json settings are set up as shown below: https://i.sstatic.net/dj3Qs.png However, despite adding breakpoints to my code, it doesn't halt there. Is there a specific configuration need ...

Bootstrap 3's Clear:Left Media Query Feature

Bootstrap is being used, and there is a div with col-xs-12, col-sm-6, col-md-4 classes. Task : To add a clear on every 1 item for col-xs-12, add a clear on every 2 items for col-sm-6, and clear on every 3rd item for col-md-4. The current code only s ...

Can we relocate the captions in colorbox to the top of the box?

Currently, my project utilizes colorbox for opening modal windows. There are 5 different styles available for colorbox, and I have chosen to implement Example 5, which can be viewed at this URL: I am looking to customize the layout of colorbox.js's ...

Having trouble with NextJs router 404 error when refreshing the page on Digital Ocean?

I am currently working with a NextJs project that has been exported as a static site and is being hosted on Digital Ocean's App platform. I am using next/router to handle routing within the application. One issue that I have encountered is when attem ...

Managing CSRF tokens in React Relay: best practices

I have been diligently working on a React Native application that communicates with a GraphQL API from a Django server. Within React Native, I have decided to utilize React Relay for handling my GraphQL requests (following the instructions provided here). ...

MUI AutoComplete does not currently support the type number with maxLength restriction. What steps can be taken to resolve this issue?

Hey there, I'm encountering an issue where maxLength is not working on the AutoComplete component when the input type is set to number. Any suggestions on how to resolve this? export default function Select({ onChangeInput, label, name, ...

"Experiencing the immersive beauty of a full-screen

This is my first attempt at a web video project and I'm struggling to create a full-width video header or background. Any help would be greatly appreciated. I came across an example that achieves what I am looking for with the following specification ...

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

Designing a menu inspired by the layout of Google Plus

I am attempting to create a responsive menu that behaves similarly to the one on Google Plus. In this menu, main options are either added to or removed from the "more" dropdown as the window is resized. Here is the current appearance of my menu: Below is ...