Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (

overflow-x: auto; overflow-y: hidden
). However, an issue arises when opening a select component as the choices display within the DataGrid, obscuring them. I have attempted adjusting the z-index property but haven't had any success 😐.

https://i.stack.imgur.com/k7Ksl.png

If anyone could provide guidance on displaying the dropdown choices outside of the DataGrid, I would greatly appreciate it! Thank you in advance!

javascriptjquerycssformio

Answer №1

This is a classic and puzzling CSS dilemma that resurfaces periodically.

To tackle the issue, you must:

  • establish a wrapper box that serves as a shared parent to both the container with overflow-y: hidden and your select list. This wrapper needs to be positioned
  • apply position: absolute positioning to the container housing the dropdown options list (the one that should override the overflow-y: hidden declaration)
  • verify that the list does not have any parent elements with positioning before reaching the wrapper.

Furthermore, especially if you are utilizing a third-party library bundled with its own CSS files, adjustments may be necessary to align with the library's default CSS styles.

Below is a code snippet incorporating the Fomantic-UI library and components:

$('#selection').dropdown();
body {
  padding: 1rem;
}

.wrapper {
  position: relative;  /* serve as positioned common ancestor for the list and overflow hidden container */
}

.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; /* apply absolute positioning for the list */
  z-index: 10;
}

#selection.ui.selection.dropdown {
  width: 196px;
  transform: none;
  position: static !important; /* prevent positioning for the list parent (the first "positioned" element should 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>

Additional helpful resources regarding this topic:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying data-table with only the values that are considered true

Right now, I am utilizing the AgReact table to exhibit data fetched from my endpoints. The data-table is functioning properly, however, it seems to be unable to display false values received from the endpoints on the table. Below are the snippets of my cod ...

javascriptreactjstypescriptag-gridag-grid-react

Retrieving data from Ajax and passing it to PHP

I am currently facing an issue with my Ajax code. When I try to access a textfield variable in PHP after alerting the value successfully, I receive an error stating Undefined index. Javascript Code <SCRIPT> function sendData(UserID) { var name = en ...

phpjavascriptajax

Using Try and Catch effectively - tips and strategies

As I delve into learning JavaScript on my own, one topic that caught my attention is the try/catch structure. The tutorial I came across only covers how to implement it, but lacks in explaining its practical applications. Is there anyone who can shed som ...

javascriptdebuggingerror-handlingtry-catch

populating all available space in layouts using bootstrap columns

I am attempting to create a grid layout using bootstrap, but I am facing an issue with positioning one of the columns. I have tried adjusting the placement of the divs and using offsets/pulls, but so far I have not been successful. To explain what I am a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Sending post back data to PHP variable using jQuery AJAX

In my current script, I am using jQuery to generate the days in a month. However, I would like to pass the data returned from a POST request to a PHP for loop as a condition. This will allow me to accurately populate a selection box with the correct number ...

phpjqueryajaxpost

What is the best way to utilize getInitialProps specifically during the building process of a NextJS site?

When I am developing a static site using NextJS, I need the getInitialProps method to run specifically during the build process and not when the client loads the page. During the build step, NextJS executes the getInitialProps method before generating the ...

javascriptnode.jsnext.jsstatic-site

Use vanilla JavaScript to send an AJAX request to a Django view

I'm attempting to make a GET AJAX request to a Django view using vanilla JS. Despite passing is_ajax(), I am having trouble properly retrieving the request object. Below is my JavaScript code. Whether with or without JSON.stringify(data), it does not ...

javascriptdjangoajax

The attempt to convert an array into an array of objects using the map function was

var array = ["x","y","z"] array.map(object => {object.key: object}) I thought array would transform into [{key:"x"},{key:"y"},{key:"z"}] but I encountered an error at object.key in my map function. Where did I go wrong? ...

javascriptreactjsecmascript-6

Guide on Implementing Link href in Next.js v12

When I set the href as a string, the link functions properly. However, when I use an object for the href, the link fails to work. Despite seeing the correct querystring when hovering over the link, it always takes me back to the first page. // ProdCard t ...

javascriptreactjstypescriptnext.js

Encountering an issue with React where the useContext hook is returning undefined instead of

I am facing an issue where I am attempting to access state and setState from the Store file, but it returns as undefined. Can someone help me understand what is causing this problem and how I can resolve it? import React, {createContext, useState} from &ap ...

javascriptreactjs

Stacking background images in CSS above other contained elements in a div

I've been experimenting with adjusting the z-index of elements in my code but haven't had any luck. Is it even possible to achieve what I want? Within a div element, I have set a background image using CSS. Inside this div, there are other eleme ...

htmlcssz-indexbackground-image

Seeking assistance with dilemmas related to jQuery (specifically kendo), .NET Web Service (asmx), and Json

After conducting extensive research on the subject, I was unable to find any satisfactory answers or complete examples. Since I have limited experience with jquery, I am in search of a straightforward sample that demonstrates what I'm trying to achiev ...

c#jqueryjsonweb-serviceskendo-ui

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

javascripthtmlajaxgoogle-visualization

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

javascriptcssreactjsreact-hooks

Creating a continuous loop in JQuery when clicking on a table row

I seem to be encountering an issue with what appears to be an infinite loop. My problem arises while trying to create a table dynamically using Ajax. Each row of the table contains a button alongside a thumbnail image and some text. I wish for the button ...

javascriptjqueryhtmlajax

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

Having trouble positioning the image at the center of the ion-slides

I'm currently working on designing a slide within an ion item. Everything seems to be functioning correctly, however, the image inside the slide is not appearing in the center. <ion-item style="height:45%; padding-left: 0;"> <ion-slides ce ...

htmlcssionic-framework

Unexpected Results from WordPress Ajax Request

Currently, I am utilizing the snippets plugin in conjunction with Elementor. To implement an ajax function as a snippet, I have set it up like so: add_action( 'wp_ajax_get_slug_from_id', 'get_slug_from_id' ); add_action( 'wp_ajax_n ...

javascriptphpjqueryajaxwordpress

Steps for adding a PHP dropdown menu to an HTML/Javascript webpage

Hey there, this is only my second post and I have to admit that I am a newbie in the world of web development. I'm spending countless hours scouring different websites for guidance, and I'm finally starting to grasp some concepts (at least for no ...

phpjavascriptmysqlajaxinnerhtml

Is it possible to guarantee that the initial AJAX request finishes before the next request is made?

I am working on a project that involves making consecutive async ajax calls to populate user schedules in an HTML table using jQuery. Each response returns a JSON serialized DataSet containing information about scheduled events and user details. The issue ...

jqueryasp.netajax