Question

我在渲染的几个Kendo TreeView小部件上遇到了一些Bootstrap css样式问题。

基本上，我有一个用户将浏览的向导，在其中一个页面上我显示了两个Kendo TreeView小部件。用户将能够从左侧＆＃34;来源＆＃34;树在他们自己的定制数据树上。

现在数据源是相同的，但这并不重要。

重要的是每次导航到包含双树视图的向导页面时，左侧导航栏树上的精灵文件夹图像都会隐藏。

我喜欢TreeView的样式，所以它不会干扰我的侧边栏中的另一个树窗口小部件。一旦我点击＆＃34; +＆＃34;我的侧边栏树中隐藏了精灵文件夹图标。更改我的页面的图标。

enter image description here

这是reportmaint.html页面，当我点击＆＃34; +＆＃34; sidebar.html中的图标（请参见下面的屏幕图像）。请记住，reportmaint视图包含左侧和右侧TreeViews：

<section data-report-wizard id="reportmaint-view" class="mainbar" data-ng-controller="reportmaint as vm">
<section class="matter">
    <div class="container-fluid">                                  
        <div class="row-fluid">
            <div class="col-md-12">
                <div class="widget wlightblue">
                    <div data-cc-widget-header title="{{vm.wizardStep}}" subtitle="" allow-collapse="true"></div>
                    <div class="widget-content">
                        <div class="clearfix">

<!-- Wizard steps 1 thru 4 omiteed for brevity -->

   <div id="wizard4" class="reportwizard">
   <div class="row-fluid">
        <h3>Choose KRIs</h3>
        <h4>Selected: {{vm.selectedItem.text}}</h4>
        <div class="col-sm-6">                      <!-- kendo TreeView widgets -->
            <span id="treeview-left" kendo-tree-view="tree"
                   k-options="vm.treeOptions"
                     k-datasource="vm.kriDataSource1"                                                       
                   k-on-change="vm.onTreeSelect(kendoEvent)"    
               </span>
        </div>                                
        <div class="col-sm-6">
            <span id="treeview-right" kendo-tree-view="tree"
                   k-options="vm.treeOptions"
                     k-data-source="vm.kriDataSource2"                                                       
                   k-on-change="vm.onTreeSelect(kendoEvent)">
               </span>
        </div>                                            
     </div>                                                
    <div class="buttons">                                        
      <button class="goto5" ng-click="vm.wizardStep='Report Dimensions'">Next</button>
      <button class="cancel-btn backto3" ng-click="vm.wizardStep='Report Dimensions'">Back</button>
      <button class="cancel-btn close-popup">Close</button>
    </div>
 </div>
   </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </section>

reportmaint.html中的

css代码：

<style scoped>
    #treeview-left, #treeview-right  {
        color:#000;
    }
    .k-textbox {
        width: 11.8em;
    }

    .demo-section {
        width: 700px;
    }

    .reportwizard {
        width: 510px;
        height: 323px;
        margin: 0 auto;
        padding: 10px 20px 20px 170px;            
    }

    .reportwizard h3 {
        font-weight: normal;
        font-size: 1.4em;
        border-bottom: 1px solid #ccc;
    }

    .reportwizard ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .reportwizard li {
        margin: 7px 0 0 0;
    }
    textarea {
        vertical-align: top;
    }
    label {
        display: inline-block;
        width: 90px;
        text-align: right;
    }

    .required {
        font-weight: bold;
    }

    .accept, .status {
        padding-left: 90px;
    }

    .valid {
        color: green;
    }

    .invalid {
        color: red;
    }
    span.k-tooltip {
        margin-left: 6px;
    }        
</style>

和我的sidebar.html使用css代码对左侧TreeView＆＃34;报告＆＃34;菜单：

 <div style="float:left;">
        <span id="treeview" kendo-tree-view="tree"                           
            k-options="vm.treeOptions"
            k-data-source="vm.reportsTree"
            k-on-change="vm.onTreeSelect(kendoEvent)">
        </span>        
    </div>

<style scoped>        
    .k-treeview .k-plus, .k-treeview .k-minus, .k-treeview .k-plus-disabled, .k-treeview .k-minus-disabled {
        background-image: url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
        background-position: -161px -192px; 
        width: 10px;
        height: 11px;
        cursor: pointer;
        margin-left:-10px;
    }
    #treeview_tv_active > div > span.k-icon.k-plus {
        background-image: url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
        background-position: -176px -192px; 
        width: 10px;
        height: 11px;
    }
    #treeview_tv_active > div > span.k-icon.k-minus {
        background-image:url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
        background-position: -177px -211px; 
        width: 10px;
        height: 11px;
    }        
    #treeview  {
        color: #fff;    /* white */
    }
</style>

再次，一旦我点击＆＃34; +＆＃34;我导航到reportmain.html。这是侧边树视图样式无意中发生变化的时候;并隐藏背景图像文件夹图标。

感谢。鲍勃

用于Kendo TreeView的CSS样式

0 个答案: