title: trying to add scroll bar
body: <p>trying to add scroll bar, somthing is blocking me, im not sure what, the part relevent in the css is the Note-Detailes.. 
  im adding two html's one is the index the other is the actual page..</p>
  
  <p>index html: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="MyApp"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css"&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
                   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"&gt;&lt;/script&gt;
          &lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"&gt;&lt;/script&gt;
  
          &lt;script src="scripts/main.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/mainJQ.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-controller="AppCtrl" layout="column" layout-margin="" class="dialogdemoBasicUsage" ng-app="MyApp"&gt;
              &lt;p class="inset"&gt;
                  Open a dialog over the app's content. Press escape or click outside to close the dialog and
                  send focus back to the triggering button.
              &lt;/p&gt;
  
              &lt;div layout="column" layout-align="center" class="dialog-demo-content"&gt;
  
                  &lt;div&gt;
                      &lt;md-button class="md-primary label" ng-click="showNotes($event)"&gt;
                           Notes
                      &lt;/md-button&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;md-button class="md-primary" ng-click="showNoteDetails($event)"&gt;
                          Notes details
                      &lt;/md-button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;br&gt;
              &lt;b layout="row" layout-align="center center" layout-margin=""&gt;
                  {{alert}}
              &lt;/b&gt;
          &lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>note html: </p>
  
  <pre><code>&lt;md-dialog class="container-box" aria-label="Mango (Fruit)"&gt;
    &lt;form &gt;
       &lt;header&gt;&lt;span&gt;Note Details&lt;/span&gt;&lt;/header&gt; 
  
       &lt;md-subheader class="md-sticky-no-effect sub-header"&gt;&lt;span&gt;Friday 25.7.13 &lt;/span&gt;&lt;/md-subheader&gt;
  
    &lt;md-dialog-content class="sticky-container"&gt;
  
        &lt;div class="dialog-box" &gt;&lt;!--first white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box1"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="dialog-box" &gt; &lt;!--second white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box2"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;You -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="dialog-box" &gt; &lt;!--third white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box2"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;You -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;3d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="dialog-box-date"&gt; &lt;!--gray box - contains the date--&gt;
            &lt;span class="dialog-box-date-text"&gt;Friday, Apr..Year 2015 Calendar - Time and Date 
            &lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="dialog-box" &gt;&lt;!--replay of the first white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box1"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="dialog-box" &gt;&lt;!--replay of the first white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box1"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="dialog-box" &gt;&lt;!--replay of the first white box inside the note--&gt;
            &lt;div class="dialog-box-circle" id="box1"&gt;&lt;/div&gt;
            &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
            &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                    &lt;option&gt;@private&lt;/option&gt;     
                    &lt;option&gt;@public&lt;/option&gt;      
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
            &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
  
        &lt;/div&gt;
  
    &lt;/md-dialog-content&gt;
  
  
          &lt;md-button class=" md-warn md-fab  md-button md-blue-theme move-right-bottom" aria-label="Use Android"&gt;
            &lt;md-icon md-svg-src="img/icons/android.svg"&gt;&lt;/md-icon&gt;
         &lt;/md-button&gt; 
  
  
  
  &lt;!--     &lt;nav mfb-menu position="" effect=""
      label="your main button text here"
      active-icon="ion-edit" resting-icon="ion-plus-round"&gt;
    &lt;a mfb-button icon="icon-class" label="child button text"&gt;
    &lt;/a&gt;
    &lt;/nav&gt;--&gt;
  &lt;!--&lt;nav mfb-menu position="br" effect="zoomin" label="hover here"
       active-icon="ion-edit" resting-icon="ion-plus-round"
       toggling-method="click"&gt;
    &lt;button mfb-button icon="paper-airplane" label="menu item"&gt;&lt;/button&gt;
  &lt;/nav&gt;--&gt;
  
  
  &lt;!--&lt;button tabindex="0" aria-label="Add" ng-click="addEvent()" class="md-fab md-fab-bottom-right md-button md-blue-theme" ng-transclude=""&gt;         &lt;ng-md-icon icon="add"&gt;&lt;/ng-md-icon&gt; &lt;md-icon aria-hidden="true" class="ng-scope ng-isolate-scope md-blue-theme" md-svg-src="images/icons/ic_add_24px.svg" style="width: 24px; height: 24px"&gt;&lt;svg style="pointer-events: none; display: block;" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" fit="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"&gt;&lt;path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/md-icon&gt; &lt;div style="" class="md-ripple-container"&gt;&lt;/div&gt;&lt;/button&gt;--&gt;
  
  
  &lt;!--&lt;ul mfb-menu="" position="br" effect="zoomin" active-icon="ion-close-round" resting-icon="ion-plus-round" ng-mouseenter="hovered()" ng-mouseleave="hovered()" toggling-method="click" menu-state="ctrl.menuState" main-action="ctrl.mainAction()" class="mfb-component--br mfb-zoomin" data-mfb-toggle="click" data-mfb-state="closed"&gt;  &lt;li class="mfb-component__wrap"&gt;    &lt;a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()" ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main"&gt;     &lt;i class="mfb-component__main-icon--resting ion-plus-round"&gt;&lt;/i&gt;     &lt;i class="mfb-component__main-icon--active ion-close-round"&gt;&lt;/i&gt;    &lt;/a&gt;    &lt;ul class="mfb-component__list" ng-transclude=""&gt;
         ngRepeat: button in ctrl.buttons &lt;li class="ng-isolate-scope" mfb-button="" icon="ion-social-github" ng-click="ctrl.loc(button.href)" label="View on Github" ng-repeat="button in ctrl.buttons"&gt;  &lt;a data-mfb-label="View on Github" class="mfb-component__button--child"&gt;    &lt;i class="mfb-component__child-icon ion-social-github"&gt;    &lt;/i&gt;  &lt;/a&gt;&lt;/li&gt; end ngRepeat: button in ctrl.buttons &lt;li class="ng-isolate-scope" mfb-button="" icon="ion-social-octocat" ng-click="ctrl.loc(button.href)" label="Follow me on Github" ng-repeat="button in ctrl.buttons"&gt;  &lt;a data-mfb-label="Follow me on Github" class="mfb-component__button--child"&gt;    &lt;i class="mfb-component__child-icon ion-social-octocat"&gt;    &lt;/i&gt;  &lt;/a&gt;&lt;/li&gt; end ngRepeat: button in ctrl.buttons &lt;li class="ng-isolate-scope" mfb-button="" icon="ion-social-twitter" ng-click="ctrl.loc(button.href)" label="Share on Twitter" ng-repeat="button in ctrl.buttons"&gt;  &lt;a data-mfb-label="Share on Twitter" class="mfb-component__button--child"&gt;    &lt;i class="mfb-component__child-icon ion-social-twitter"&gt;    &lt;/i&gt;  &lt;/a&gt;&lt;/li&gt; end ngRepeat: button in ctrl.buttons 
      &lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;--&gt;
  
  
  &lt;!--    &lt;div class="md-actions" layout="row"&gt;
      &lt;md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md&gt;
        More on Wikipedia
      &lt;/md-button&gt;
      &lt;span flex&gt;&lt;/span&gt;--&gt;
  &lt;!--    &lt;md-button ng-click="answer('not useful')" class="md-primary"&gt;
       Not Useful
      &lt;/md-button&gt;
      &lt;md-button ng-click="answer('useful')" class="md-primary"&gt;
        Useful
      &lt;/md-button&gt;--&gt;
  
  
    &lt;/div&gt;
    &lt;/form&gt;
  &lt;/md-dialog&gt;
  </code></pre>
  
  <p>this is the css: </p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
      @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
  
  .dialogdemoBasicUsage .dialogDemo1 {
      height: 500px; }
  .dialogdemoBasicUsage .dialog-demo-content div {
      text-align: center; }
  .dialogdemoBasicUsage .md-subheader {
      background-color: #dcedc8;
      margin: 0;
  }
  
  /*note*/ 
  
  form{
  
      position: relative;
      display: inline-block;////
  
  
  
  }
  .container-box-note{     
  
  
      width:382px;
      height:529px;
      overflow:hidden;
      border:1px solid #cccccc; 
      margin:0 auto;
      background-image: url('http://i.stack.imgur.com/ynxjD.png');
      background-position: center bottom;
      background-repeat: repeat-y; 
  /*    overflow-y :auto;*/
  
  }
  
  header{                     /*the red head line*/
      z-index: 2;
  
      position:relative;
      width:100%;
      height:41px;
      color:white;
      background-color:#de4b4b;   
      font-weight: bold;
      font-size:14px;
      margin:auto;
  
  }
  .container-box-note header span{  
       z-index: 2;/*text inside the  red head line*/
  
       display: block;
  
       padding-left: 45%;
      padding-top:14px;
      padding-bottom:14px;
  
       font-family: 'roboto';
  
       font-weight: 700;
  
       font-size: 17px; 
  
  }
  .sub-header-note{         /*white sub head line*/
       z-index: 1;
      padding-left: 0px;
      width:100%;
      height:37px;
      background-color:white;
      font-size:12px;
      color:#454545;
      font-family:'roboto';               
      font-weight:700;
      border-bottom: 1px solid #cccccc;
      box-shadow: 0px 2px 1px lightgray;  
      margin-left: 0px;
      /* padding: 0px; */
  }
  
  
  .sub-header-note span{         /*text inside the white sub head line*/
       z-index: 1;
      display:inline;
      padding-top:14px;
      /* padding-left:10px; */
  }
  .text-box-note{                     
      padding-top: 4px;
  
  }
  
  .dialog-box-name-note{              /*text on the main */
  
      /*line-height:48px;*/ 
      /* display:block; */
      margin: 0px 0px 0px 15px;
      /* font-weight:bold; */
      /* display: inline; */   
      color:#3eb6d9;       
      font-size:13px;     
      /* font-weight:bold; */
      font-family:'roboto';  
      font-weight:500;
  }
  
  .dialog-box-name-note select {
      border:0px;
      font-size:13px;
      font-family:'roboto';
      font-weight:500;
      color:#454545;
      background-color:transparent;
      cursor: pointer;
  /*    overflow-y: auto;*/
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  
  
  }
  textarea{
  
      dispaly: block;
      width: 95.2%;
      height: 417px;
  
      background-color: transparent;
      border: 0px;
  
  
      outline: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      line-height: 25px;
      font-family: 'roboto';
      font-weight: 700;
      margin-left: 14px;
      margin-right:14px;
      text-transform: capitalize;
  }
  
  
  .move-right-bottom{
      position:absolute;
      bottom:0px;
      right:4px;
  
  
  }
  
  /*Note Details*/
  
  
  .sticky-container{
       padding: 0px 0px 0px 0px; 
       overflow-y: hidden;
       overflow:auto;
  
  
  }
  
  .container-box{     
      /*position:absolute;*/
      width:382px;
      background-color: #e6e6e6 !important;
  
      border:1px solid #cccccc;
      margin: 0 auto;
  
  }
  /*.opacity-affect{                                 //cover blur affect
  
      opacity:0.5;
  }   */
  
  header{                     /* red head line*/
      display: block;
      position: relative;
      width:100%;
      height:41px;
      color:white;
      background-color:#de4b4b;   
      font-weight: bold;
      font-size:14px;
      margin:0px;
  
  
  
  }
  header span{         /*text inside the red head line*/
      display:inline-block;
      padding-left:149px;
      padding-top:14px;
      padding-bottom:14px;
  
  
  }
  
  
  .sub-header{         /*white sub head line*/
      position:relative;
      width:100%;
      height:37px;
      background-color:white;
      font-size:12px;                         
      color:#454545;
      font-family: 'Roboto';              
      font-weight:700;
      border-bottom: 1px solid #cccccc;
      box-shadow: 0px 2px 1px lightgray;
  
  
  }
  .sub-header span{         /*text inside the white sub head line*/
      display:inline; //
      padding-top:14px;
      padding-left: 10px;
  
  }
  .dialog-box{                    /* white boxes inside the noteDetails main*/
      position:relative;
      width:365px;    
      background-color:white;
      margin-top: 8px !important;
      margin-left:8px ;
      margin-bottom: 0px;
      margin-right:8px ;
      border: 1px solid #cccccc;
      border-radius:1px;            
      box-shadow: 0px 2px 1px lightgray;    
  }
  .dialog-box-circle{
  
      display:inline-block;
      float:left;
      width:35px;
      height:35px;
      border-radius:30px;
      background-color:#cccccc;
      margin:15px 8px 14px 15px;   
      vertical-align:middle;/*allow text to appear next to the circle div */
  
  }
  .dialog-box-name{
      display:inline-block;   
      color:#3eb6d9;       
      font-size:13px;
      margin-top:13px;        
      /* font-weight:bold; */
      font-family:'roboto';  
      font-weight:500;                
  }
  .dialog-box-text{
  
      display:inline-block;
  
  
      color:#8d8d8d;  
      font-size:13px;     
  
  
      font-family: 'Roboto';      
      font-weight:400;        
  
  
      line-height:17px;     /*the space between the line*/ 
  
  
      margin-left:15px;
      margin-bottom:8px;
      margin-top:0px;    
  
  
      margin-right:17px;
  
  
      bottom:0;
  
  
      left:0;
  }
  #box1 {
      background-image: url('https://randomuser.me/api/portraits/thumb/women/54.jpg');  /*profile picture*/
      background-position: center center;
      background-size: 100% auto;
  }
  #box2 {
      background-image: url('https://randomuser.me/api/portraits/thumb/men/96.jpg');  /*profile picture*/
      background-position: center center;
      background-size: 100% auto;
  }
  .dialog-box-name select {
      border:0px;
      font-size:13px;  
      font-family:'Roboto';
      color:#454545;
      cursor: pointer;
      cursor: pointer;
  /*    overflow: auto;*/
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  
  }
  
  .dialog-box-day{
      display:block;
      font-size:11px;   
      font-family: 'Roboto';  
      font-weight:700;             
      margin:4px 0px 0px 0px;
  
  }
  
  .dialog-vertical-menu{
      float:right;
      margin:8px;
  
  }
  .dialog-box-date{        /*the gray separator box inside the note main*/
      position:relative;
      width:365px;    
      height:37px;
      margin: 8px 0px 10px 8px;
      background-color:#cccccc;
  
  }   
  .dialog-box-date-text {
  
      display:inline-block;
      font-family: 'Roboto';
      font-weight:500;      
      font-size:12px;
      color:#000000;
      margin-left:14px;
      margin-top:10px;
  
  }
  </code></pre>