搜索
搜索

试图添加滚动条

debugcn 发表于 Dev
10
单体

试图添加滚动条，东西阻塞了我，我不确定是什么，css中的relevent部分是Note-Detailes。im添加两个html的一个是索引，另一个是实际页面。

索引html： 

<!doctype html>
<html ng-app="MyApp">
    <head>
        <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
                 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
        <script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

        <script src="scripts/main.js"></script>
        <script src="scripts/mainJQ.js"></script>

    </head>
    <body>
        <div ng-controller="AppCtrl" layout="column" layout-margin="" class="dialogdemoBasicUsage" ng-app="MyApp">
            <p class="inset">
                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.
            </p>

            <div layout="column" layout-align="center" class="dialog-demo-content">

                <div>
                    <md-button class="md-primary label" ng-click="showNotes($event)">
                         Notes
                    </md-button>
                </div>
                <div>
                    <md-button class="md-primary" ng-click="showNoteDetails($event)">
                        Notes details
                    </md-button>
                </div>
            </div>

            <br>
            <b layout="row" layout-align="center center" layout-margin="">
                {{alert}}
            </b>
        </div>


    </body>
</html>

注意html： 

<md-dialog class="container-box" aria-label="Mango (Fruit)">
  <form >
     <header><span>Note Details</span></header> 

     <md-subheader class="md-sticky-no-effect sub-header"><span>Friday 25.7.13 </span></md-subheader>

  <md-dialog-content class="sticky-container">

      <div class="dialog-box" ><!--first white box inside the note-->
          <div class="dialog-box-circle" id="box1"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">Lea Poran -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">2d ago</span>

          <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
      </div>

      <div class="dialog-box" > <!--second white box inside the note-->
          <div class="dialog-box-circle" id="box2"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">You -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">2d ago</span>

          <div class="dialog-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat </div>

      </div>

      <div class="dialog-box" > <!--third white box inside the note-->
          <div class="dialog-box-circle" id="box2"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">You -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">3d ago</span>

          <div class="dialog-box-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros </div>

      </div>

      <div class="dialog-box-date"> <!--gray box - contains the date-->
          <span class="dialog-box-date-text">Friday, Apr..Year 2015 Calendar - Time and Date 
          </span>
      </div>

      <div class="dialog-box" ><!--replay of the first white box inside the note-->
          <div class="dialog-box-circle" id="box1"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">Lea Poran -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">2d ago</span>

          <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>

      </div>
      <div class="dialog-box" ><!--replay of the first white box inside the note-->
          <div class="dialog-box-circle" id="box1"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">Lea Poran -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">2d ago</span>

          <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>

      </div>
      <div class="dialog-box" ><!--replay of the first white box inside the note-->
          <div class="dialog-box-circle" id="box1"></div>
          <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
          <span class="dialog-box-name">Lea Poran -<select>
                  <option>@private</option>     
                  <option>@public</option>      
              </select>
          </span>
          <span class="dialog-box-day">2d ago</span>

          <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>

      </div>

  </md-dialog-content>


        <md-button class=" md-warn md-fab  md-button md-blue-theme move-right-bottom" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
       </md-button> 



<!--     <nav mfb-menu position="" effect=""
    label="your main button text here"
    active-icon="ion-edit" resting-icon="ion-plus-round">
  <a mfb-button icon="icon-class" label="child button text">
  </a>
  </nav>-->
<!--<nav mfb-menu position="br" effect="zoomin" label="hover here"
     active-icon="ion-edit" resting-icon="ion-plus-round"
     toggling-method="click">
  <button mfb-button icon="paper-airplane" label="menu item"></button>
</nav>-->


<!--<button tabindex="0" aria-label="Add" ng-click="addEvent()" class="md-fab md-fab-bottom-right md-button md-blue-theme" ng-transclude="">         <ng-md-icon icon="add"></ng-md-icon> <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"><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"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></md-icon> <div style="" class="md-ripple-container"></div></button>-->


<!--<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">  <li class="mfb-component__wrap">    <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()" ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main">     <i class="mfb-component__main-icon--resting ion-plus-round"></i>     <i class="mfb-component__main-icon--active ion-close-round"></i>    </a>    <ul class="mfb-component__list" ng-transclude="">
       ngRepeat: button in ctrl.buttons <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">  <a data-mfb-label="View on Github" class="mfb-component__button--child">    <i class="mfb-component__child-icon ion-social-github">    </i>  </a></li> end ngRepeat: button in ctrl.buttons <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">  <a data-mfb-label="Follow me on Github" class="mfb-component__button--child">    <i class="mfb-component__child-icon ion-social-octocat">    </i>  </a></li> end ngRepeat: button in ctrl.buttons <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">  <a data-mfb-label="Share on Twitter" class="mfb-component__button--child">    <i class="mfb-component__child-icon ion-social-twitter">    </i>  </a></li> end ngRepeat: button in ctrl.buttons 
    </ul></li></ul>-->


<!--    <div class="md-actions" layout="row">
    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md>
      More on Wikipedia
    </md-button>
    <span flex></span>-->
<!--    <md-button ng-click="answer('not useful')" class="md-primary">
     Not Useful
    </md-button>
    <md-button ng-click="answer('useful')" class="md-primary">
      Useful
    </md-button>-->


  </div>
  </form>
</md-dialog>

这是CSS： 

@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;

}
马克西姆·肖斯汀（Maxim Shoustin）

尝试用或+固定的md-dialog-content内容包装内容：divoverflow-y autooverlayheight

<md-dialog-content class="sticky-container">
   <div style="overflow-y: overlay;
     height: 478px;
     max-height: 478px;
     min-height: 478px;">

    ...

  </div>
</md-dialog-content>

**md-dialog-content有身高auto

干杯，

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JFrame添加滚动条

来自分类Dev

JFrame添加滚动条

来自分类Dev

向动态ul添加滚动条

来自分类Dev

在滚动条上添加文本阴影

来自分类Dev

向动态ul添加滚动条

来自分类Dev

添加滚动条可推动布局

来自分类Dev

粘性页脚添加滚动条

来自分类Dev

向表格垂直添加滚动条

来自分类Dev

在wordpress中添加滚动条

来自分类Dev

React Native：试图在滚动条上隐藏搜索栏

来自分类Dev

CSS滚动条自动滚动添加内容

来自分类Dev

如何在滚动条对话框中添加滚动条？

来自分类Dev

尽管在样式中添加了滚动条，但Div不允许滚动条

来自分类Dev

左侧的滚动条

来自分类Dev

水平滚动条？

来自分类Dev

移动滚动条

来自分类Dev

滚动条设置

来自分类Dev

个别滚动条

来自分类Dev

滚动条消失了

来自分类Dev

双滚动条

来自分类Dev

滚动条操作

来自分类Dev

滚动条覆盖

来自分类Dev

移动滚动条

来自分类Dev

TableLayout的滚动条

来自分类Dev

滚动条设计

来自分类Dev

火狐滚动条

来自分类Dev

滚动js滚动条

来自分类Dev

在jstree节点文本和滚动条之间添加间隙

来自分类Dev

添加新的LI元素时如何使滚动条下降

Related 相关文章

  1. 1

    JFrame添加滚动条

  2. 2

    JFrame添加滚动条

  3. 3

    向动态ul添加滚动条

  4. 4

    在滚动条上添加文本阴影

  5. 5

    向动态ul添加滚动条

  6. 6

    添加滚动条可推动布局

  7. 7

    粘性页脚添加滚动条

  8. 8

    向表格垂直添加滚动条

  9. 9

    在wordpress中添加滚动条

  10. 10

    React Native：试图在滚动条上隐藏搜索栏

  11. 11

    CSS滚动条自动滚动添加内容

  12. 12

    如何在滚动条对话框中添加滚动条？

  13. 13

    尽管在样式中添加了滚动条，但Div不允许滚动条

  14. 14

    左侧的滚动条

  15. 15

    水平滚动条？

  16. 16

    移动滚动条

  17. 17

    滚动条设置

  18. 18

    个别滚动条

  19. 19

    滚动条消失了

  20. 20

    双滚动条

  21. 21

    滚动条操作

  22. 22

    滚动条覆盖

  23. 23

    移动滚动条

  24. 24

    TableLayout的滚动条

  25. 25

    滚动条设计

  26. 26

    火狐滚动条

  27. 27

    滚动js滚动条

  28. 28

    在jstree节点文本和滚动条之间添加间隙

  29. 29

    添加新的LI元素时如何使滚动条下降

热门标签

归档