CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Anil P Babu
Anil P Babu

Reputation: 1295

position HTML5 ARIA popup under main div

i am new to ARIA tags. Kindly excuse if i am stupid.

What i want is a custom drop down to be visible when i click the down arrow.

The problem is the popup comes write below the icon as shown in this pic.

enter image description here

CSS

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        }
<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row vertical-align">
                <div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
                   Benarsi Das
                </div>
                <div class="col-xs-1 col-md-1 dropdrown">
                   <div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                   </div>
                   <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                     something
                   </ul>
                </div>
                <div class="col-xs-4 col-md-4">
                   <span style="color: white;font-size: 23px;padding-top: 10px;"></span>
                </div>
             </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

But I need it like this

enter image description here

I know I can achieve it with this code

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        }
<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row dropdown" id="dropdownrow">
                 <div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
                       Benarsi Das
                    </div>
                    <span class="caret"></span>
                 </div>
                 <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                   something
                 </ul>              
              </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.

Any help would be greatly appreciated.

Upvotes: 0

Views: 147

Answers (1)

Rounin
Rounin

Reputation: 29463

In your stylesheet, add the declaration

transform: translate(-60px, 26px);

to the style rules for .bkcolor.

N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.

Working Example:

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        transform: translate(-60px, 26px);
        }
<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row vertical-align">
                <div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
                   Benarsi Das
                </div>
                <div class="col-xs-1 col-md-1 dropdrown">
                   <div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                   </div>
                   <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                     something
                   </ul>
                </div>
                <div class="col-xs-4 col-md-4">
                   <span style="color: white;font-size: 23px;padding-top: 10px;"></span>
                </div>
             </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions