CODEWITHSUNDEEP
cssangularjsangular-material
kathkroll
kathkroll

Reputation: 1

Angular Material Dialog - fixed position element height getting cut off at random point

I need to add an element inside of an Angular Material dialog that has it's own height and will be unaffected by the dialog (imagine a custom dropdown). Whenever I do this, the dialog gets chopped off at the bottom, but very oddly - not directly at the bottom of the dialog. It's allowed to go about 20px beyond the bottom, and then gets randomly cut off.

Code pen here: http://codepen.io/kathk1/pen/woQWRZ

.rectangle {
  background: red;
  height: 900px;
  width: 200px;
  position: fixed;
  z-index: 2000;
}

If you launch that dialog, the red rectangle which is the fixed element in this case should be 900px tall, but it isn't allowed to get that tall.

static image of the rectangle issue here

What is making it do this and/or how do I get it to stop doing it? I'm stumped.

Sorry editing for clarity: I want the red rectangle to extend to its full 900px beyond the dialog. I do not want the dialog to scroll.

Upvotes: 0

Views: 2997

Answers (2)

Searching
Searching

Reputation: 2279

START UPDATE 1

based on your edit, md-dialog hides content that overflow. You will need to override this behavior to show the entire rectangle. With your existing css,add this to show the rectangle.

md-dialog.md-default-theme
{  
  overflow: visible !important;
}

enter image description here

END UPDATE 1

You can create an exterior div,set a to fixed height of choice and let the contents inside overflow and scroll.

css

.wrapOne{     
    overflow-y: scroll;
    height:30px;
}
.rectangle {
    background: red;
    height: 900px;  
    width:200px;
}

template

    '<md-dialog aria-label="Sample Dialog">' +
    '<md-content>'+
    '<div class="wrapOne"><div class="rectangle">TESTING------TESTING------TESTING------TESTING------TESTING------</div></div>'+
    '    <md-list>'+
    '      <md-item ng-repeat="item in ctrl.items">'+
    '       <p>{{item}}</p>' +
    '      </md-item>'+
    '    </md-list>'+
    '  </md-content>' +
    '  <div class="md-actions">' +
    '    <md-button ng-click="ctrl.closeDialog()">' +
    '      Close Greeting' +
    '    </md-button>' +
    ' ' +
    '</md-dialog>',

enter image description here

Upvotes: 1

M&#225;rio Oliveira e Silva
M&#225;rio Oliveira e Silva

Reputation: 11

Do you want to make the red rectangle inside of the white square?

If so, change the property, position:fixed; to position: relative;, the white square, will gain a vertical scroll.

Upvotes: 1

Related Questions