1

I'm using 2 Multiselect dropdown menus in a td element of a table in html. The number of the dropdowns depend on the array.

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Group Name</th>
            <th>Group Languages</th>
        </tr>                                       
    </thead>
    <tbody>
        <tr *ngFor="let lngGrp of languageGroups let i = index">
            <td>{{ lngGrp.id.groupLanguageName }}</td>
            <td>
                <p-multiSelect [options]="languageOptions" [(ngModel)]="lngGrp.selectedGroupLanguages" [ngModelOptions]="{standalone: true}" [disabled]="viewOnly"></p-multiSelect>
            </td>
        </tr>
    </tbody>
</table>

The problem is that the multiselect dropdown doesn't show up and slides under the next td element. I've tried using PrimeNG and Softsimon's Multiselect dropdown, the same problem persists for both of them. Any idea as to how to show it over the next td element?

Mauricio Wanderley Martins
  • 8,834
  • 2
  • 10
  • 18
i_code
  • 483
  • 1
  • 5
  • 13
  • don't know the libs you're talking about, but some `z-index`'es should do the trick – giorgio Sep 18 '17 at 07:57
  • I tried that using .p-multiSelect{ z-index:10;} but the same thing happens. – i_code Sep 18 '17 at 08:12
  • yeah but you should probably create a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Make sure the parent element of your dropdown _and_ the element that's overlapping are positioned (`position: relative` will do) and the parent of your dropdown has a higher `z-index`. – giorgio Sep 18 '17 at 09:14

0 Answers0