My app should be able to display a tree with HTML, CSS and javascript and I can draw everything except the graphic element I’ve pointed an arrow to i.e. it’s the dotted grey horizontal line that won’t display:
The above is the result I want. My result is this, without the horizontal line:
The CSS is
<style type="text/css">/* TREE LAYOUT */ .tree ul { margin:0 0 0 5px; padding:0 0 0 0; list-style-type:none; } .tree li { display:block; min-height:18px; line-height:18px; padding:0 0 0 15px; margin:0 0 0 0; /* Background fix */ clear:both; } .tree li ul { display:none; } .tree li a, .tree li span { display:inline-block;line-height:16px;height:16px;color:black;white-space:nowrap;text-decoration:none;padding:1px 4px 1px 4px;margin:0; } .tree li a:focus { outline: none; } .tree li a input, .tree li span input { margin:0;padding:0 0;display:inline-block;height:12px !important;border:1px solid white;background:white;font-size:10px;font-family:Verdana; } .tree li a input:not([class="xxx"]), .tree li span input:not([class="xxx"]) { padding:1px 0; } /* FOR DOTS */ .tree .ltr li.last { float:left; } .tree > ul li.last { overflow:visible; } /* OPEN OR CLOSE */ .tree li.open ul { display:block; } .tree li.closed ul { display:none !important; } /* FOR DRAGGING */ #jstree-dragged { position:absolute; top:-10px; left:-10px; margin:0; padding:0; } #jstree-dragged ul ul ul { display:none; } #jstree-marker { padding:0; margin:0; line-height:5px; font-size:1px; overflow:hidden; height:5px; position:absolute; left:-45px; top:-30px; z-index:1000; background-color:transparent; background-repeat:no-repeat; display:none; } #jstree-marker.marker { width:45px; background-position:-32px top; } #jstree-marker.marker_plus { width:5px; background-position:right top; } /* BACKGROUND DOTS */ .tree li li { overflow:hidden; } .tree > .ltr > li { display:table; } /* ICONS */ .tree ul ins { display:inline-block; text-decoration:none; width:16px; height:16px; } .tree .ltr ins { margin:0 4px 0 0px; } </style><link href="/welcome/static/css/style.css" media="all" type="text/css" rel="stylesheet"><style type="text/css">#tree li > a ins { background-image:url(/welcome/static/images/user.png); } </style>
.content .foot {
clear: both;
}
#current_month {
cursor: pointer;
}
p {
clear:both;
}
#toggle_temporal_navigation {
text-align: right;
}
form {
text-align: center;
}
.form_controller {
border-bottom: 1px solid #f3f3f3;
clear: both;
list-style: none;
margin: 0 0 0.5em;
padding: 1em 0 2em;
}
.form_controller dt {
font-weight: bold;
width: 100px;
}
.form_controller dt, .form_controller dd {
float: left;
margin-right: 2em;
}
fieldset {
border:0;
margin: 0 auto;
text-align: left;
width: 80%;
}
.ui-slider {
clear: both;
top: 1em;
}
#tree .level_parseable, #tree .cc_personal_parseable, #tree .cc_downlines_parseable, #tree .cc_activity_parseable, #tree .cc_nonmanager_parseable, #tree .cc_total_parseable{
display:none;
}
.leaf_info th.sortSelectAsc{
text-decoration: underline;
}
.leaf_info th.sortSelectDesc{
text-decoration: overline;
}
/**
* Display years right below beginning of year
*/
.ui-slider dt {
text-align: left;
}
#instructions {
clear: both;
margin-top: 2em;
}
#update_timeframe {
text-align: center;
}
#update_timeframe button {
height: 25px;
margin: 0 auto;
width: 150px;
}
#tree_container {
max-height: 400px;
overflow-y: auto;
padding: 1em 0;
zoom: 1;
}
.module {
padding: 0.6em 1em !important;
}
#tree .name {
cursor: pointer;
}
/* The '>' is a necessary selector so the level isn't inherited, i.e. all a-elements that
are children of a high-level distributor should not be bolded*/
/*Managers*/
#tree li.level_5>a, #tree li.level_6>a, #tree li.level_7>a, #tree li.level_8>a, #tree li.level_9>a, #tree li.level_10>a {
font-weight: bold;
}
#tree li.inactive>a {
color: #666;
}
/*New distributors*/
#tree li.new>a {
color: #269e0f;
}
#tree li a {
font-weight: normal;
position: static;
}
.ui-dialog .left_column {
font-weight: bold;
padding-right: 5px;
vertical-align: top;
}
.ui-dialog .checklist {
background: transparent url(/pix/check.gif) left center no-repeat;
padding-left: 23px;
}
.ui-dialog .plans {
background: transparent url(/pix/target.gif) left center no-repeat;
padding-left: 23px;
}
/* leafs */
.leaf_info.helper {
border-bottom: 1px solid #efefef;
}
#tree_container .leaf_info {
border-collapse: collapse;
display: inline;
vertical-align: bottom;
zoom: 1;
}
.leaf_info th{
color: #2779AA;
cursor:pointer;
font-weight:bold;
text-align:left;
}
.leaf_info td{
padding: 0 1px;
}
.leaf_info .name {
white-space: normal;
width: 253px;
}
ul li ul li .leaf_info .name {
width: 233px;
}
ul li ul li ul li .leaf_info .name {
width: 213px;
}
ul li ul li ul li ul li .leaf_info .name {
width: 193px;
}
ul li ul li ul li ul li ul li .leaf_info .name {
width: 173px;
}
ul li ul li ul li ul li ul li ul li .leaf_info .name {
width: 153px;
}
ul li ul li ul li ul li ul li ul li ul li .leaf_info .name {
width: 133px;
}
.leaf_info .level,.leaf_info .downlines,.leaf_info .cc_personal,.leaf_info .cc_downlines,.leaf_info .cc_activity,.leaf_info .cc_nonmanager,.leaf_info .cc_total {
text-align: right;
}
.leaf_info .level {
width: 33px;
}
.leaf_info .downlines {
width: 38px;
}
.leaf_info .cc_personal {
width: 48px;
}
.leaf_info .cc_downlines {
width: 40px;
}
.leaf_info .cc_activity {
width: 58px;
}
.leaf_info .cc_nonmanager {
width: 63px;
}
.leaf_info .cc_total {
width: 73px;
}
#tree_container .cc_personal {
width: 55px;
}
.leaf_info td.manager {
text-align: center;
width: 310px;
}
.leaf_info td.manager.active {
color: #000;
}
.leaf_info td.manager.inactive {
color: #ccc;
}
The HTML is
`<div id="tree_container">
<div id="tree" class="tree tree-default" style="direction: ltr;">
<ul class="ltr">
{% for person in people %}
<li id="{{ person.key.id()|makeid }}" class="level_1 inactive leaf"><a class="open_dialog" href="/person/{{ person.key.id() }}"><ins> </ins><table class="leaf_info"><tbody> <tr><td class="name">{{ person.firstname }} {{ person.lastname }} </td><td class="level" title="New Distributor"><span class="level_parseable">A</span>{{person.level()}}</td><td class="downlines">{{person.this_month_new_recruitment()}}</td><td class="cc_personal"><span class="cc_personal_parseable"></span>{{person.this_month_personal_silver()}}</td><td class="cc_downlines"><span class="cc_downlines_parseable"></span>{{person.this_month_distributor_silver()}}</td><td class="cc_activity"><span class="cc_activity_parseable"></span>{{person.activity()}}</td><td class="cc_nonmanager"><span class="cc_nonmanager_parseable"></span>{{person.this_month_non_manager_silver()}}</td><td class="cc_total"><span class="cc_total_parseable"></span>{{person.this_month_total_silver()}}</td></tr></tbody></table></a></li>{% endfor %}`
What should be done to display the horizontal line?
Thank you
Applying something like this to your list item should work:
It’ll prepend
--to each element.To get the exact effect you’re after, you’ll have to add in an image like so: