Multiselect options getting hidden behind the div below it

Question

I am using multiselect drop down list inside a table cell. But when I click it the options are hidden behind the contents of the cell below it.

What am I doing wrong?

$('#example-getting-started').multiselect({
  buttonWidth: '700px',
  maxHeight: 200,
  buttonText: function(options, select) {
    var labels = [];
    options.each(function() {
      if ($(this).attr('label') !== undefined) {
        labels.push($(this).attr('label'));
      } else {
        labels.push($(this).html());
      }
    });
    return labels.join(', ') + '';
  }
});

<div id="attachedInfoOpts">
  <select id="example-getting-started" multiple="multiple">
    <option value="Breating Exercises" selected="selected">Breating Exercises</option>
    <option value="Prescription">Prescription</option>
    <option value="Health Dieting Information" selected="selected">Healthy Dieting Information</option>
    <option value="Health Dieting Information" selected="selected">Healthy Dieting Information</option>
  </select>
</div>

Answer 1

Add

Overflow: visible;

To the surrounding Container.

Answer 2

Try adding appendTo="body" as an attribute to your p-multiSelect.

The result should look like this:

<p-multiSelect appendTo="body" *ngSwitchCase="'color'" [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>

I've had this problem, and adding this attribute solved it for me.