Search code examples
javascriptjquery-ui-resizable

jQuery Resizable handle z-index

I noticed that the jQuery UI's resizable handles are on top of all other elements in the page. I checked using Chrome's developer tools and saw that they are automatically given a z-index of 1001. Is there a way to disable this and just give them the same z-index as the resizable element? Thanks.

Solution

  • The z-index is set with CSS, not JavaScript. You will need to edit the CSS responsible, in this case:

    .ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

    Or, define your own rule to override the behavior. See this page for more information: http://www.mail-archive.com/[email protected]/msg09524.html