2

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 .

enter image description here

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

ash
  • 1,065
  • 1
  • 5
  • 20
kkaragki
  • 150
  • 2
  • 16

1 Answers1

2

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>
Some other useful links about your question:
cheesyMan
  • 1,494
  • 1
  • 4
  • 13