javascriptjquerycssformio

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 😐.

enter image description here

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:

    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: