css3 - CSS styling for a Kendo TreeView -
i've got bootstrap css styling issues on several kendo treeview widgets i'm rendering.
basically, have wizard user navigate through, , on 1 of pages i'm display 2 kendo treeview widgets. user able drag items left "source" tree onto own customized data tree.
right datasource same, doesn't matter.
the important thing sprite folder image on left navbar tree getting hidden every time navigate wizard page contains dual treeviews.
i'd style of treeview doesn't interfere tree widget in sidebar. sprite folder icon getting hidden in sidebar tree once click on "+" icon changes page.
here reportmaint.html page renders when click on "+" icon in sidebar.html (see screen image below). keep in mind reportmaint view contains left , right treeviews:
<section data-report-wizard id="reportmaint-view" class="mainbar" data-ng-controller="reportmaint 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 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> css code in reportmaint.html :
<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> and sidebar.html css code styles left treeview "reports" menu :
<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> again, once click on "+" sign navigate reportmain.html. when sidebar treeview styling inadvertently changes; , background-image folder icon gets hidden.
thanks. bob
Comments
Post a Comment