What is the best way to place a dropdown menu in front of buttons?

Here is an example snippet of HTML code that showcases a SweetAlert2 date picker popup for a button titled "Click me!":

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datepicker-bs5/dist/css/datepicker-bs5.min.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
    <style>
        .my-footer {
            background-color: #163b65;
            color: #ffffff;
            margin-top: 1.5em;
            height: 5em;
            padding: 1em;
            font-size: 80%;
        }
        .room-image {
            max-width: 50%;
        }
        .redText {
            color: red;
        }
        .notie-container {
      box-shadow: none;
    }
        .swal2-confirm {
      z-index: -1;
    }
        .swal2-deny {
      z-index: -1;
    }
    .date-picker-modal {
        z-index: 10000;
    }
    </style>

    <!-- Other things -->
    <title>My nice page</title>
</head>
<body>

    <!-- Navbar and other contents -->
    
    <!-- Various scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datepicker-full.min.js"></script>
    <script src="https://unpkg.com/notie"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Additional JavaScript code section -->
    
</body>
</html>

There seems to be an issue where the "OK" and "Cancel" buttons are obstructing the vanillajs-datepicker. You've tried adjusting the z-index, but it doesn't seem to be effective.

https://i.sstatic.net/6QsAg.png

Have you considered revisiting the implementation of the date picker to address this issue?

UPDATE:

After reviewing Limon's code example, it appears that the problem may be related to the usage of the "await" keyword. When utilized, the date picker is still being obstructed by the button. Further investigation is required to resolve this issue.

Answer №1

To bring an element to the front, consider setting its position relative. Check out this helpful resource for more information.

Answer №2

To ensure proper functionality, it is recommended to apply the z-index: 2 property to the .swal2-html-container class. Here is a suggested approach:

let datepicker

Swal.fire({
  html: `<input id="date" type="text" autocomplete="off">`,
  customClass: {
    popup: 'swal2-with-datepicker',
  },
  preConfirm: () => {
    return datepicker.getDate()
  },
  didOpen: () => {
    datepicker = new Datepicker(Swal.getPopup().querySelector('#date'))
  },
}).then((result) => {
  console.log(result.value)
})
/* Ensure .swal2-html-container is positioned above buttons */
.swal2-with-datepicker .swal2-html-container {
   z-index: 2;
 }
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="077166696e6b6b666d742a63667362776e646c6275473629342936">[email protected]</a>/dist/css/datepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4533242b2c2929242f366821243120352c262e203705746b766b74">[email protected]</a>/dist/js/datepicker.js"></script>

Answer №3

So, to resolve the issue, make sure to include the following code:

.swal2-actions {
    z-index: 0! important;
}

It can be challenging to locate the elusive swal2-actions element, identify its z-index override, and prevent it from recurring. The result is displayed below. The await command is essential for capturing user input and must not be omitted.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d667a667b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f2e5eaede8e8e5eef7a9e0e5f0e1f4ede7efe1f6c4b5aab6aab4">[email protected]</a>/dist/css/datepicker-bs5.min.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
    <style>
        .my-footer {
            background-color: #163b65;
            color: #ffffff;
            margin-top: 1.5em;
            height: 5em;
            padding: 1em;
            font-size: 80%;
        }
        .room-image {
            max-width: 50%;
        }
        .redText {
            color: red;
        }
        .notie-container {
            box-shadow: none;
        }
        .swal2-actions {
            z-index: 0! important;
        }
    </style>

    <!-- Other things -->
    <title>My nice page</title>
</head>
... [Rest of the HTML content]

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

Struggling to receive a response from request.POST.get within the index function of views.py

I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...

Tips for sending data through an AJAX call to the app.post() function in Express

I am currently working on a blog application using express and node. In order to save a blog post without using a database (as the posts are stored in an array), I need to pass an array of keywords to the app.post() method. To display keywords as separate ...

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

I would greatly appreciate your assistance in resolving the issue I am facing. I have been trying to navigate from one view to another, but when I use an <a> tag nested within a <mat-sidenav>, I encounter the following error: "Uncaught (in prom ...

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

Installing assets automatically in Netbeans for Symfony2

Whenever I test my application, I find myself having to run the following command in Netbeans: assets:install Repeating tasks gets quite tedious... Symfony2 requires running this command to ensure that modified files are placed in the correct location. ...

Mastering the art of reading rows in ASP.NET using Java Script

Within the code snippet below, you'll find an image located in the second column. Clicking on this second column should allow me to access the data stored in the first column. Let's say we have a table with 10 rows. If the user clicks on the ico ...

Remove Vue Component from the styling of current application

We integrated a Vue component (using Vuetify) into our existing .NET MVC application. The issue we are facing is that the Vue component is inheriting all the CSS styles from the rest of the application. Here's a simplified version of the HTML structur ...

Is it possible to incorporate a foreach loop while also implementing unique adjustments at specific locations within the code?

I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

Received an unexpected GET request while attempting to modify an HTML attribute

After clicking a button in my HTML file, a function is called from a separate file. Here is the code for that function: function getRandomVideoLink(){ //AJAX request to /random-video console.log("ajax request"); var xhttp = new XMLHttpRequest( ...

Is there a way to determine if a certain class link within a DIV has been clicked and then replace the DIV's click functionality?

I have multiple DIV elements like the one below on my webpage: <div class='entry'> This is a statement <a title="Search @travel" class="app-context-link" href="">@travel</a> </div> When a DIV with the class .ent ...

I'm looking for a simple calendar widget that can be clicked on using only plain JavaScript/jQuery and is compatible with Bootstrap

I'm in search of a simple clickable calendar widget to integrate into my website. I am using a combination of HTML, CSS, Bootstrap 5, and jQuery 3.6 for development. The functionality I require is for the calendar days to be clickable so that I can di ...

Making an element sticky within a container while the parent element is set to overflow hidden

Here is a case where I have generated HTML and CSS code that includes classes for overflow, container height, and sticky positioning: .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .container { max-height: 100px; ...

Choosing Only the Visible Element with CSS

Within my program, there exists a text element that appears in two distinct sections: section A and section B (in the form of a popup). My intention was to create one object using CSS that could be utilized in both areas. By doing so, I would be able to em ...

Design a sophisticated background using CSS

https://i.sstatic.net/yILwL.png I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent ...

Tips for preventing text from breaking onto a new line in Safari

I have cforms plugin installed on a WordPress page. Interestingly, the word "required" in Russian appears to consist of two words as per the translation office. While it displays correctly in Firefox, in Safari it breaks and aligns to the bottom left of ...

Tips for optimizing Jquery selectors to streamline recurring functions

I have 9 "service node" divs in my HTML code, each containing a hidden div and a button that triggers the rotation of the button by 45 degrees and reveals the hidden div. The challenge I am facing is that I have been using repetitive functions for each ser ...

The data in the textarea is lost once a script is executed

As a beginner in client side web programming, I am currently working on a simple code. In the initial part of the script, I assign a textarea with the text "Why is this text staying". When the user clicks on the submit button of the form, my goal is to c ...

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...