CODEWITHSUNDEEP
jquerycss
Jen Born
Jen Born

Reputation: 741

overlay showing in background instead of on top

I'm using Foundation 4 and am trying to have an overlay with spinner while the element is being loaded with ajax. The overlay and spinner are showing, just under the select, so obviously it looks goofy. In the fiddle, it's working: http://jsfiddle.net/jenborn/95pUd/2/

Here's an image of how it really looks: enter image description here

i have a div with a select inside:

<div class="small-3 columns"  id="DIV_select2"  >
   <div>
   <select id="select2" name="select2" class="medium">
   <option value='0'>None selected</option>
   </select>
   </div>
</div>

I've tried reducing the select's z-index and opacity, which is happening, but it's not pushing the overlay to the top

jQuery

$("#select2").addClass('fadedCtrl');
$("#DIV_select2").fadeIn(100,function(){$(this).addClass('ctrl_overlay');});

Here's the css classes I'm trying to work with.

.ctrl_overlay {position:relative; left: 0px; top: 0px; width: 100%; height: 60%; z-index: 5000;background-color:#666666;opacity:.8;background: url("/images/big-grey-spinner.gif") no-repeat scroll center center #666666; }

.fadedCtrl {z-index: 10;opacity:.1;}

OK, I just tried adding position:relative to .fadedCtrl and !important to position: relative and z-index:10 so that line is now:

.fadedCtrl {z-index: 10 !important;opacity:.1;position: relative !important;}

It's still not working but it did push the select down a bit:enter image description here

SOLUTION thanks to Sheng:

    .ctrl_overlay {position: absolute; left: 0; top: 50%; width: 100%; height: 48px; margin-top: -24px;background-color:#666666;opacity:.8;background: url("/images/big-grey-spinner.gif") no-repeat scroll center center #666666;}
form.custom .custom.dropdown {margin-bottom: 0;}
     $("#DIVselect2").append("<div id='DIVXselect2'></div>");
     $("#DIVXselect2").fadeIn(100,function(){$(this).addClass('ctrl_overlay');});

Upvotes: 1

Views: 687

Answers (1)

sheng
sheng

Reputation: 1372

The reason your code doesn't work is this: setting a z-index won't matter because the select input is a child of the div which has the spinner.

This won't work because the div, when the ctrl_overlay class is added, has a background image. This image will appear behind all contents in the div.

The solution? Have another div. Use the exact same class, but append a child div. This div can now have a z-index higher than the select input. Two children can have different z-indices, but a parent and child cannot.

Upvotes: 1

Related Questions