1

I have a dropdown menu in a row in a portlet.

<div class="col-md-6">
  <p class="todo-red todo-inline">Gestionnaire : <span class="bold">Name</span></p>
</div>
<div class="col-md-5">
  <span class="bold caption-subject uppercase font-grey-mint">Inactif depuis : 26 J</span> 
</div>
<div class="col-md-1">
  <div class="btn-group">
    <a class="btn btn-sm btn-default todo-add-button" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" aria-expanded="false"><i class="fas fa-volume-mute" aria-hidden="true"></i></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="fa fa-pencil" aria-hidden="true"></i> 1 jour </a></li>
      <li><a href="javascript:;"><i class="fa fa-pencil" aria-hidden="true"></i> 3 jours </a></li>
      <li><a href="javascript:;"><i class="fa fa-pencil" aria-hidden="true"></i> 15 jours </a></li>
      <li><a href="javascript:;"><i class="fa fa-pencil" aria-hidden="true"></i> Définitif </a></li>
    </ul>
  </div>
</div>

It's look like that: dropdown behind the portlet

The dropdown menu is behind the portlet, I need to have it above the portlet. I tried to z-index with position:absolute but nothing work. I haven't find any good help on SO. Have you any ideas about my issue?

Thank you

EDIT: Please find the JSFiddle illustration: https://jsfiddle.net/L5o0jh4k/

suiL
  • 11
  • 2

0 Answers0