Form.IO - How to make dropdown choices inside a DataGrid to become visible

I'm using Form.IO JS library for developing a new form. I need to create a DataGrid with 11 components inside of it, so the only way to fit everything inline is to use overflow: auto CSS rule (in fact overflow-x: auto; overflow-y: hidden).

Here comes the issue. Because of those 2 CSS rules, when I open a select component, the opened list choices become visible inside the DataGrid component, which I don't want to because it hides all choices. I played around with z-index, but without luck 😐.

Can someone guide me on how to successfully show the dropdown choices outside of the DataGrid? Thanks in advance!

Solution

This is an old and wierd CSS question that we read about from time to time.

Basically, you need to:

create a wrapper box that is a common ancestor to both the box with overflow-y: hidden and your select list. This wrapper has to be positioned
give a position: absolute positioning to the box that contains the list of your dropdown options (i.e. the list that has to bypass the overflow-y: hidden declaration)
ensure that the list HAS NOT any positioned ancestor before the wrapper.

After all that, especially if you're using a third-party library that comes with its own css files, you will almost certainly need to tweak a bit with the library's default css rules.

Here a snippet (using the Fomantic-UI library and components):

$('#selection').dropdown();

body {
  padding: 1rem;
}

.wrapper {
  position: relative;  /* "positioned" common ancestor to list and overflow hidden box */
}

.long--box {
  padding: 20px;
  width: 100%;
  height: 80px;
  background-color: lightcoral;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#selection.ui.selection.dropdown .menu {
  width: 196px;
  max-width: 196px;
  min-width: 196px;
  top: 58px;
  left: 21px;
  position: absolute; /* absolute positioning for the list */
  z-index: 10;
}

#selection.ui.selection.dropdown {
  width: 196px;
  transform: none;
  position: static !important; /* no positioning for the list parent (the first "positioned" one has to be the common ancestor)*/
}

input {
  height: 36px;
  width: 150px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  font-family: sans-serif;
  padding: 0 0 0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>



<body>
  <div class='wrapper'>
    <div class='long--box'>
      <div class='ui selection dropdown' id='selection'>
        <div class='default text'>Select...</div>

        <div class='menu'>
          <div class="item" data-value="0">Cat</div>
          <div class="item" data-value="1">Dog</div>
          <div class="item" data-value="2">Bird</div>
          <div class="item" data-value="3">Rabbit</div>
          <div class="item" data-value="4">Squirrel</div>
          <div class="item" data-value="5">Horse</div>
        </div>
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>

      <div class='ui input'>
        <input type="text" placeholder="input">
      </div>
    </div>
  </div>
</body>

Form.IO - How to make dropdown choices inside a DataGrid to become visible

Some other useful links about your question: