2014-02-17 421 views
0

我已经实现了bootstrap application wizard,它的工作原理非常棒,但在这种情况下,如何在每个页面或卡片上添加滚动条?自举应用程序向导中的滚动条

这里是没有溢出模态窗口卡包括:

enter image description here

这里是我添加的滚动条代码的css文件:

/* WIZARD GENERAL */ 
.wizard { 
     display:none;   
} 

.wizard-dialog {} 
.wizard-content {} 

.wizard-body { 
     padding: 0; 
    height: 1500px; 
     margin: 0; 
    overflow-y: scroll; 
} 

/* WIZARD HEADER */ 
.wizard-header { 
     padding: 9px 15px; 
     border-bottom: 0;  

} 

.wizard-header h3 { 
     margin: 0; 
     line-height: 35px; 
     display: inline; 
     font-family: 'Segoe UI'; 
     font-family: inherit; 
     font-weight: bold; 
     text-rendering: optimizelegibility; 
     color: #030845; 
} 

.wizard-subtitle { 
     font-weight:bold; 
     color:#AFAFAF; 
     padding-left:20px; 
} 


/* WIZARD NAVIGATION */ 
.wizard-steps { 
     width: 28%; 
     background-color: #f5f5f5; 
     border-bottom-left-radius: 6px; 
     position: relative; 
} 

.wizard-nav-container { 
     padding-bottom: 30px; 
    overflow-y: scroll; 
} 

.wizard-nav-list { 
     margin-bottom: 0; 
} 

.wizard-nav-link .glyphicon-chevron-right { 
     float:right; 
     margin-top:12px; 
     margin-right:-6px; 
     opacity:.25; 
} 

li.wizard-nav-item.active .glyphicon-chevron-right { 
     opacity:1; 
} 

li.wizard-nav-item { 
     line-height:40px; 
} 

.wizard-nav-list > li > a { 
     background-color:#f5f5f5; 
     padding:3px 15px 3px 20px; 
     cursor:default; 
     color:#B4B4B4; 
} 

.wizard-nav-list > li > a:hover { 
     background-color: transparent; 
} 

.wizard-nav-list > li.already-visited > a.wizard-nav-link { 
     color:#030845; 
     cursor:pointer; 
} 

.wizard-nav-list > li.active > a.wizard-nav-link { 
     color:white; 
} 

.wizard-nav-item .already-visited .active { 
     background-color:#030845; 
} 

.wizard-nav-list li.active > a { 
     background-color:#030845; 
} 


/* WIZARD CONTENT */ 
.wizard-body form { 
     padding: 0; 
     margin: 0; 
    height: auto; 
} 

/* WIZARD PROGRESS BAR */ 
.wizard-progress-container { 
     margin-top: 20px; 
     padding: 15px; 
     width: 100%; 
     position: absolute; 
     bottom: 0; 
} 

.wizard-card-container { 
     margin-left: 28%; 
} 

/* WIZARD CARDS */ 
.wizard-error, 
.wizard-failure, 
.wizard-success, 
.wizard-loading, 
.wizard-card { 
     border-top: 1px solid #EEE; 
     display:none; 
     padding:35px; 
     padding-top:10px; 
     overflow-y:auto; 

     /* 
     position:relative; 
     height:300px; 
     margin-right: 5px; 
     */ 
} 

.wizard-card-overlay { 
     overflow-y: initial; 
} 

.wizard-card > h3 { 
     margin-top:0; 
     margin-bottom:20px; 
     font-size:21px; 
     line-height:40px; 
     font-weight:normal; 
} 

/* WIZARD FOOTER */ 
.wizard-footer { 
     padding:0; 
} 

.wizard-buttons-container { 
     padding:20px; 
} 

.wizard-cancel { 
     margin-left: 12px; 
} 

/* Inner Card */ 
.wizard-input-section { 
     margin-bottom:20px; 
} 

.wizard-dialog .popover.error-popover { 
     background-color:#F2DEDE; 
     color:#B94A48; 
     border-color:#953B39; 
} 

.wizard-dialog .popover.error-popover .arrow::after { 
     border-right-color:#F2DEDE; 
} 

.wizard-dialog .popover.error-popover .popover-title { 
     display:none; 
} 

.wizard-dialog .popover.error-popover .arrow { 
     border-right-color:#953B39; 
} 

当我加入overflow-发生这种情况:

enter image description here

它似乎显示滚动条正确的方式,但它也推动导航按钮。任何想法如何解决这个问题真的有帮助。

回答

3

您需要在容器上设置高度和溢出。

.wizard-card-container { 
    height: 300px; 
    overflow-y: scroll; 
} 
+0

完美!非常感谢! – CSharpDev4Evr

相关问题