I am trying to implement a table that is horizontally scrollable (using React), in each row there is a dropdown ponent. This ponent is custom and doesn't use the <select> tag. I have noticed that at the bottom of the table, when I open the input the options are hidden since the table has overflow-x: scroll. This isn't an issue if I use a <select> tag however I would need to rebuild our custom dropdown and all it's functionality. A demo is available here:

You will note that the first column doesn't show the options unless you scroll in the table and the second column does show the options as required. My question is how do I allow the first column to overflow while maintaining overflow-x: scroll on the table as a whole.

The code is as follows:

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

function App() {
  const options = [
    {
      value: "Volvo", label: "Volvo"
    },
    {
      value: "Saab", label: "Saab"
    },
    {
      value: "Merc", label: "Merc"
    },
    {
      value: "BMW", label: "BMW"
    }
  ];

  return (
    <div className="App">
      <div className="table-wrapper">
        <table>
          <thead>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </thead>

          <tbody>
            <tr>
              <td>
                <Select options={options} value="Volvo" className="Select"/>
              </td>
              <td>
                <select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
              </td>
              <td>ABCDEF</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}

.table-wrapper {
  max-width: 120px;
  max-height: 60px;
  border: 1px solid red;
  overflow-x: scroll;
}

.Select {
  min-width: 60px;
}

I am trying to implement a table that is horizontally scrollable (using React), in each row there is a dropdown ponent. This ponent is custom and doesn't use the <select> tag. I have noticed that at the bottom of the table, when I open the input the options are hidden since the table has overflow-x: scroll. This isn't an issue if I use a <select> tag however I would need to rebuild our custom dropdown and all it's functionality. A demo is available here: https://codesandbox.io/embed/frosty-moon-pz0y3

You will note that the first column doesn't show the options unless you scroll in the table and the second column does show the options as required. My question is how do I allow the first column to overflow while maintaining overflow-x: scroll on the table as a whole.

The code is as follows:

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

function App() {
  const options = [
    {
      value: "Volvo", label: "Volvo"
    },
    {
      value: "Saab", label: "Saab"
    },
    {
      value: "Merc", label: "Merc"
    },
    {
      value: "BMW", label: "BMW"
    }
  ];

  return (
    <div className="App">
      <div className="table-wrapper">
        <table>
          <thead>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </thead>

          <tbody>
            <tr>
              <td>
                <Select options={options} value="Volvo" className="Select"/>
              </td>
              <td>
                <select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
              </td>
              <td>ABCDEF</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}

.table-wrapper {
  max-width: 120px;
  max-height: 60px;
  border: 1px solid red;
  overflow-x: scroll;
}

.Select {
  min-width: 60px;
}

• javascript
• html
• css
• reactjs
• react-select

1 Answer 1

https://codesandbox.io/s/jovial-galileo-f05m9

Check out line 44 of index.js. You can use the menuPortalTarget prop of React Select to attach the opened menu element to the document body or some other element you wish which is above the table container in the hierarchy. This way, it won't be affected by the overflow rules in the table container.

https://react-select./advanced#portaling

https://github./JedWatson/react-select/issues/3263#issuement-445809701

This is caused by the way browsers handle mixing of overflow rules. You would think that you could simply use overflow-x: scroll; overflow-y: visible; - but this is apparently not the case. The browser will overwrite the overflow-y rule to auto if the overflow-x rule is scroll or auto.

https://css-tricks./popping-hidden-overflow/