2121< style type ="text/css ">
2222 table .fancytree-ext-columnview {
2323 border-collapse : collapse;
24- width : 100% ;
24+ width : 100% ;
2525 }
26- table .fancytree-container tbody tr td {
27- max-width : 300 px ; /* width does not work */
26+ table .fancytree-container tbody tr : first-child td {
27+ height : 200 px ;
2828 }
2929 span .fancytree-node {
3030 white-space : nowrap; /* prevent long lines to wrap */
4646 span .selTag {
4747 border : 1px outset # dec ;
4848 display : inline-block;
49- padding : 0 5 px ;
49+ padding : 1 px 3 px ;
5050 margin : 1px 5px ;
5151 background-color : # dec ;
5252 border-radius : 5px ;
5353 cursor : pointer;
54+ vertical-align : bottom;
55+ position : relative;
5456 }
5557 span .selTag button .close {
5658 border : 1px solid transparent;
57- border-radius : 4 px ;
59+ border-radius : 5 px ;
5860 padding : 0px 1px 2px 1px ;
59- margin-left : 8px ;
61+ position : absolute;
62+ top : 0 ;
63+ right : 0 ;
6064 background-color : transparent;
6165 visibility : hidden;
6266 }
6367 span .selTag : hover button .close {
6468 border-color : gray;
6569 background-color : # f99 ;
70+ opacity : 0.8 ;
6671 visibility : visible;
6772 }
6873</ style >
7681 extensions : [ "columnview" ] ,
7782 checkbox : true ,
7883 source : {
79- url : "ajax-tree-plain.json"
84+ url : "ajax-tree-products.json"
85+ } ,
86+ init : function ( event , data ) {
87+ data . tree . findFirst ( "C64" ) . setActive ( ) ;
8088 } ,
8189 lazyLoad : function ( event , data ) {
8290 data . result = { url : "ajax-sub2.json" } ;
@@ -123,7 +131,10 @@ <h1>Example: 'columnview' extension</h1>
123131 Display tree data in a column view as known from Apple Macintosh / OSX.
124132 </ p >
125133 < p >
126- < b > Status</ b > : experimental
134+ < b > Status</ b > : experimental.
135+ < b > Details:</ b >
136+ < a href ="https://github.com/mar10/fancytree/wiki/ExtColumnView "
137+ target ="_blank " class ="external "> ext-columnview</ a > .
127138 </ p >
128139 </ div >
129140 < div >
@@ -133,15 +144,16 @@ <h1>Example: 'columnview' extension</h1>
133144 <!-- Add a <table> element where the tree should appear: -->
134145 < table id ="columnview ">
135146 < colgroup >
136- < col width ="300px "> </ col >
137- < col width ="300px "> </ col >
138- < col width ="300px "> </ col >
147+ < col width ="33% "> </ col >
148+ < col width ="33% "> </ col >
149+ < col width ="33% "> </ col >
139150 </ colgroup >
140151 < thead >
141152 < tr > < th > 1</ th > < th > 2</ th > < th > 3</ th > </ tr >
142153 </ thead >
143154 < tbody >
144- < tr > < td > ?</ td > < td > ?</ td > < td > ?</ td > </ tr >
155+ < tr > < td > ?</ td > < td > ?</ td > < td > ?</ td > </ tr >
156+ <!-- The following rows are only used for the custom select badge functionality: -->
145157 < tr > < td id ="tags " colspan ="3 "> Selected nodes: </ td > </ tr >
146158 < tr > < td id ="preview " colspan ="3 "> preview</ td > </ tr >
147159 </ tbody >
0 commit comments