Question

I am trying to display a popover divs here . Please click the question mark icons. You will notice that there is a popover div that shows up in all browsers. However, in Internet Explorer 7, it fails to display properly. I tried using z-index property but that does not seem to work. How can I make the popover show up on top of the input field?

Below is a sample HTML

<div class="col-xs-5 divPopUp">
<label class="control-label customerAccountNo" for="custom4">Customer Acct No</label>
<img src="32005/images/iconQuestion.png" alt="Help" data-toggle="popover" data-placement="right" data-content="Found on the Plush Rewards flyer provided at the store. Lost this? Please contact the store you purchased from" class="popUp customerAccountNoImg"/> </div>

Screenshot added of the issue:

Please notice that the popover div is hidden behind the input

Was it helpful?

Solution

Not easy to solve without a fiddle, but using IE debug tool, I was able to solve the problem, but not sure it really works in live exemple.

I added a z-index in the div col-xs-5 :

<div class="col-xs-5 divPopUp" style="z-index: 100">

Can you edit css for this element ?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top