CODEWITHSUNDEEP
javascripthtmlcss
user10295057
user10295057

Reputation:

Negative z-index not working inside modal

I need to style the radio button with my custom css

It's almost working but I'm facing a problem. I don't know Why z-index(-1) is not working inside a modal

Here's my code 

.container{
 padding:50px; 
 width:100%;
 }
.langsection .langname{
 width:50%; 
 float:left;
 }
.langsection .langflag{
 width:50%; 
 float:left; 
 text-align:right;
 }
.modal.langmod .modal-dialog{
 width:400px; 
 margin:50px auto 0; 
 background:#fff; 
 border-radius:6px; 
 border:none;
 }
.modal .modal-body{
 padding:0; 
 border-radius:6px; 
 overflow:hidden;
 }
.selclang li{
 list-style:none; 
 text-transform:uppercase; 
 padding:10px 15px; 
 border-bottom:1px solid #e5e5e5;
 }
.modal-dialog::after{
 content:""; 
 clear:both; 
 display:table;
 }
.selclang{
 margin:0; 
 padding:0;
 }
.langflag span.flg_icn{
 padding-right:20px;
 }
.langflag span{
 display:inline-block;
 }
.selclang li.active, .selclang li:hover{
 background:#A40030; 
 color:#fff;
 }
.modal.fade.in{
 padding:0;
 }
.modal.langmod .modal-content{
 border:none;
 }
.modal.langmod p{
 text-transform:uppercase; 
 width:200px; margin:auto; 
 text-align:center;
 }
.langflag input[type="radio"]{
 width:18px; 
 height:18px; 
 z-index:88; 
 opacity:0;
 }
.langflag input[type="radio"] + i{
 width:18px; 
 height:18px; 
 position:absolute; 
 top:4px;  
 left:0; 
 border-radius:100%; 
 border:1px solid #e5e5e5; 
 z-index:-1; 
 }
.langflag input[type="radio"]:checked + i{
 box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; 
 background:green;
 }
.flg_slct{
 position:relative;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal langmod fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content clearfix">
        <div class="modal-body">
        <ul class="selclang">
        <li class="active">
        <div class="langsection clearfix">
        <div class="langname">English</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Nederlands</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Deutch</div>
         <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Jezyk Polski</div>
        <div class="langflag"><span                       class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        </ul>
        <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

I don't know what am I missing here. I need to replace the default replace radio button with my custom style which is next to the flag.

Any alternative answers will be appreciated.

Upvotes: 2

Views: 818

Answers (3)

Ashish Bhatt
Ashish Bhatt

Reputation: 17

As per my knowledge, by-default model dialog box has 1050 z-index, so it require to give more then 1050, if you give 1060 then it will display correctly.

Upvotes: 1

AJAY MAURYA
AJAY MAURYA

Reputation: 551

Use parent .flg_slct some positive z-index:1 rest of all your code is Ok 

 .container{
 padding:50px; 
 width:100%;
 }
.langsection .langname{
 width:50%; 
 float:left;
 }
.langsection .langflag{
 width:50%; 
 float:left; 
 text-align:right;
 }
.modal.langmod .modal-dialog{
 width:400px; 
 margin:50px auto 0; 
 background:#fff; 
 border-radius:6px; 
 border:none;
 }
.modal .modal-body{
 padding:0; 
 border-radius:6px; 
 overflow:hidden;
 }
.selclang li{
 list-style:none; 
 text-transform:uppercase; 
 padding:10px 15px; 
 border-bottom:1px solid #e5e5e5;
 }
.modal-dialog::after{
 content:""; 
 clear:both; 
 display:table;
 }
.selclang{
 margin:0; 
 padding:0;
 }
.langflag span.flg_icn{
 padding-right:20px;
 }
.langflag span{
 display:inline-block;
 }
.selclang li.active, .selclang li:hover{
 background:#A40030; 
 color:#fff;
 }
.modal.fade.in{
 padding:0;
 }
.modal.langmod .modal-content{
 border:none;
 }
.modal.langmod p{
 text-transform:uppercase; 
 width:200px; margin:auto; 
 text-align:center;
 }
.langflag input[type="radio"]{
 width:18px; 
 height:18px; 
 z-index:88; 
 opacity:0;
 }
.langflag input[type="radio"] + i{
 width:18px; 
 height:18px; 
 position:absolute; 
 top:4px;  
 left:0; 
 border-radius:100%; 
 border:1px solid #e5e5e5; 
 z-index:-1; 
 }
.langflag input[type="radio"]:checked + i{
 box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; 
 background:green;
 }
.flg_slct{
 position:relative;
 z-index:1;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal langmod fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content clearfix">
        <div class="modal-body">
        <ul class="selclang">
        <li class="active">
        <div class="langsection clearfix">
        <div class="langname">English</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Nederlands</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Deutch</div>
         <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Jezyk Polski</div>
        <div class="langflag"><span                       class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        </ul>
        <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 2

Viira
Viira

Reputation: 3911

Perhaps, you can try negative margin instead of using z-index. Try this code.

z-index:-1;

will go beyond the modal because modal's z-index is 999 or 9999 something like this its very huge.

So try giving negative margin it won't affect anything

.container{
 padding:50px; 
 width:100%;
 }
.langsection .langname{
 width:50%; 
 float:left;
 }
.langsection .langflag{
 width:50%; 
 float:left; 
 text-align:right;
 }
.modal.langmod .modal-dialog{
 width:400px; 
 margin:50px auto 0; 
 background:#fff; 
 border-radius:6px; 
 border:none;
 }
.modal .modal-body{
 padding:0; 
 border-radius:6px; 
 overflow:hidden;
 }
.selclang li{
 list-style:none; 
 text-transform:uppercase; 
 padding:10px 15px; 
 border-bottom:1px solid #e5e5e5;
 }
.modal-dialog::after{
 content:""; 
 clear:both; 
 display:table;
 }
.selclang{
 margin:0; 
 padding:0;
 }
.langflag span.flg_icn{
 padding-right:20px;
 }
.langflag span{
 display:inline-block;
 }
.selclang li.active, .selclang li:hover{
 background:#A40030; 
 color:#fff;
 }
.modal.fade.in{
 padding:0;
 }
.modal.langmod .modal-content{
 border:none;
 }
.modal.langmod p{
 text-transform:uppercase; 
 width:200px; margin:auto; 
 text-align:center;
 }
.langflag input[type="radio"]{
 width:18px; 
 height:18px; 
 opacity:0;
 }
.langflag input[type="radio"] + i{
 width:18px; 
 height:18px; 
 top:4px;  
 left:0; 
 border-radius:100%; 
 border:1px solid #e5e5e5; 
 margin-left: -20px;
 display:inline-block;
 }
.langflag input[type="radio"]:checked + i{
 box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; 
 background:green;
 }
.flg_slct{
 position:relative;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal langmod fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content clearfix">
        <div class="modal-body">
        <ul class="selclang">
        <li class="active">
        <div class="langsection clearfix">
        <div class="langname">English</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Nederlands</div>
        <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Deutch</div>
         <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        <li>
        <div class="langsection clearfix">
        <div class="langname">Jezyk Polski</div>
        <div class="langflag"><span                       class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
        </div>
        </li>
        </ul>
        <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 4

Related Questions