CODEWITHSUNDEEP
javascriptcssangularjs
KingKongFrog
KingKongFrog

Reputation: 14429

Angular UI - Modal Height relative to window Height

I have a modal with quite a bit of text. I'm trying to figure out how to restrict the modal height to size of the window and add a scrollbar to the content area, above the OK button.

Plunkr

<note>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
....

Upvotes: 0

Views: 701

Answers (2)

ThiagoPXP
ThiagoPXP

Reputation: 5462

You can just use CSS, no need for JavaScript.

.modal-body {
    max-height: 500px; /* adjust to your needs */
    overflow-y: auto;
}

Upvotes: 0

shaunhusain
shaunhusain

Reputation: 19748

Updated to use the window.innerHeight and have an attribute/directive called clientHeight that takes some number and uses it as a percentage to multiply by the window.innerHeight to size some contents and set the overflow-y

http://plnkr.co/edit/9eg3jH0vILntygMn3ieD?p=preview

app.directive('clientHeight', function(){
  return {
    link:function(scope, iElem, iAttrs){
      debugger;
      iElem.css('height', window.innerHeight*iAttrs.clientHeight/100+'px')
      iElem.css('overflow-y', 'scroll')
    }
  }
});

You can probably pull this off with CSS alone maybe using "calc" or otherwise but if not the above JS solution works fine too.

Upvotes: 2

Related Questions