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

I'm using

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

CodePudding user response：

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  data-value="0">Cat</div>
          <div  data-value="1">Dog</div>
          <div  data-value="2">Bird</div>
          <div  data-value="3">Rabbit</div>
          <div  data-value="4">Squirrel</div>
          <div  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: