Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here:
If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown search menu instead.

I have set the z-index to 1 for the menu and 0 for the search DIV, but unfortunately, it doesn't seem to be resolving the problem. Here's what my result looks like:
https://i.sstatic.net/tbveO.jpg

$("div[data-role='panel']").panel().enhanceWithin();
  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  <body>
    <div role="main" class="ui-content">
        <div  id="menuPanel"   class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" >
            <h4>Menu</h4>
            <ul data-role="listview">
                <li><a href="#" style="color: #FFFFFF" >List</a></li>
                <li><a href="#" style="color: #FFFFFF" >New Ads</a></li>
                <li><a href="#" style="color: #FFFFFF" >Register</a></li>
                <li><a href="#" style="color: #FFFFFF" >Login</a></li>
                <li><a href="#" style="color: #FFFFFF" >Your Ads</a></li>
                <li><a href="#"  onclick='Website2APK.rateUs();'>Rate us</a></li>               
            </ul>
            <p></p>
            <img src="img/head2.jpg" />
        </div> 
        
        <div id="divFilter"  >
            <table>
                <tr>
                    <td><b>Category</b></td>
                    <td><b>Type</b></td>
                    <td><b>Distance Km</b></td>
                </tr>
                <tr>
                    <td>
                        <select id="cbbSearchCategory" onchange="ScaricadatiEavvia();"></select><!---->
                    </td><!---->
                   
                    <td>
                        <select id="cbbSearchKM" class="form-control" onchange="ScaricadatiEavvia();">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="40">40</option>
                            <option value="100">100</option>
                            <option value="500">500</option>
                            <option value="" selected>2000</option>
                        </select>
                    </td>
                    
                </tr>
            </table>
        </div>
     </div>   
  </body>

Answer №1

Here is a solution for you to consider:

.ui-panel{
    z-index:999 !important
  }

Answer №2

.custom-select .custom-btn select {
  z-index: 1;
}

Would you mind giving this a shot?

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

Using CSS overflow property set to "hidden" and max-height that is a multiple of line-height, in Chrome and Edge browsers, the "hidden" text may leak into view

By adjusting the zoom level to either 100% or 90%, you can execute the following Snippet and notice that at the bottom of the text, there is a slight overlap of the top part of the letters from the first line which should be hidden. This issue seems to occ ...

What's causing my text to slowly appear while my HTML canvas remains static and unchanged?

Can someone take a look at my code: http://jsfiddle.net/7y9Gp/2/ I've been struggling with trying to fade in and out text or images, but for some reason, my canvas object refuses to cooperate. I've tried swapping the position of the canvas with ...

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked ...

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

Learn how to apply inline styles to multiple objects within a single element using React

In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag: const Header = () => { const firstName = "Ashraf"; const lastName = "Fathi"; const date = new Date() ...

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

Tips for reducing text in a card design

As a newcomer to codeigniter 4, I recently created an event card with a lengthy description. However, when I attempted to display the event data from the database on the card, it ended up becoming elongated due to the length of the description: https://i. ...

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details: Html: <div class="col-12"> <mat-form-field appearance="fill"> <mat-label>Start Date ...

What is the most effective method for dimming or disabling a Material-UI div?

Within my application, there are instances where I need to dim and disable the mouse events for certain div elements based on the component's state - such as when it's loading. My initial approach involved creating a helper function that generate ...

Selecting the initial and final elements in a list without utilizing pseudo-classes

Currently, I am in the process of designing a custom MUI styled component and I have encountered a challenge. I want to apply extra styles specifically for the first and last child elements. The issue arises because MUI utilizes the emotion styled library, ...

Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover? <h1>I am looking to have this element replaced...</h1> <span class="fa-stack fa-lg ...

Attempting to enlarge an image by hovering over it proves to be futile

Currently, I am exploring CSS and attempting to enlarge 2 images when they are hovered over. Unfortunately, the desired effect is not working. .imagezoom img { position: relative; float: left; margin: 50px 5px 0px 42px; border-color: rgba(143, 179, 218, ...

What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...

Troubleshooting a Cache Issue in Your Next.js Application

Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...

What could be causing my custom cursor to malfunction?

I've been attempting to customize the cursor image, but despite following all provided instructions, it's still not working: CSS: body, html { margin: 0px; padding: 0px; border: 1px solid red; cursor: url(images/rsz_red_crosshair.gi ...

Tips for decreasing the width of an element by one pixel when it is specified in percentage

There are four elements, each with a width of 25%, filling the page perfectly. I am trying to create a 1px gap between each element by adding a margin-right of 1px. However, this causes the last element to overflow onto the next line. How can I reduce the ...

A guide to loading CSS and JavaScript files asynchronously

Is it possible to use loadCSS (https://github.com/filamentgroup/loadCSS/blob/master/README.md) to allow the browser to asynchronously load CSS and JavaScript? This is what I currently have in my head tag: <link rel="preload" href="http://zoidstudios. ...