2

OK, I have a simple nested list, styled with jqTree.

Nested list with jqTree styling

Playing with the inspector, I noticed the appended class, responsible for highlighting elements is jqtree-selected.

And the whole thing works quite ok. Except for one thing:

I want the selection background (with the blueish colour) to occupy the full width of the line, no matter which element is selected. (Currently, the node1 and node2 elements, behave fine, but their "children" elements, when highlighted, do not occupy the whole row)

Any ideas on how this can be achieved?

Demo: http://jsfiddle.net/80589tbx/

T J
  • 42,762
  • 13
  • 83
  • 138
Dr.Kameleon
  • 22,532
  • 20
  • 115
  • 223

2 Answers2

3

Well let's pseudo it... :)

.jqtree-selected> .jqtree-element::before {
    content:"";
    display:block;
    width:100%;
    position:absolute;
    top:0px;
    left:-100%;
    height:21px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(190, 224, 245)), to(rgb(137, 175, 202)));
}

Updated Fiddle

Thanks to the plugin, it already apply position:relative on .jqtree-element by default so we don't have to do it.

T J
  • 42,762
  • 13
  • 83
  • 138
  • OK, you're my hero! You can't imagine how many hours I've spent on that stupid detail! Btw, your example works fine, however I had to set `top:-1px; height:24px;`. Ah, and for some reason, jsFiddle messed up the colours. In any case, **thanks a lot**! :-) – Dr.Kameleon Sep 10 '14 at 11:31
-1

Remove margin-left from following css.

You can find it jquery.jqtree.css line 12

ul.jqtree-tree ul.jqtree_common {
display: block;
margin-left: 12px;/**Remove this**/
margin-right: 0;
}
Richa
  • 3,261
  • 2
  • 27
  • 51