Remove Highligthing From Dynatree Checkbox Mode When Clicked or Hover

Question

In dynatree with the vista-skin when you hover over a tree item it has a hover effect where it has a blue background.

Additionally when you click the item to check it it has a orange border in chrome and a dotted border in IE.

I'm trying to remove both of these so that there is no effect on hover or once clicked.

See selectMode 3 for an example: wwwendt.de/tech/dynatree/doc/sample-select.html

Update: I have found in /src/skin-vista/ui.dynatree.css if you comment out the following blocks it will prevent the blue highlight color. Additionally there is a line you need to uncomment to fix the outline that the webbrowser puts in as shown below.

/*Comment this out
ul.dynatree-container a:hover
{
/*  text-decoration: underline; */
    background: #F2F7FD; /* light blue */
    border-color: #B8D6FB; /* darker light blue */
}
*/

/*Comment this out
span.dynatree-active a
{
    border: 1px solid #99DEFD;
    background-color: #D8F0FA;
}
*/

ul.dynatree-container a
/*, ul.dynatree-container a:visited*/
{
    /*The line below was originally commented out, uncomment it to remove the orange/dotted border*/
    outline: 0; /* @ Firefox, prevent dotted border after click */
}

If you've solved your problem please post it as the answer and mark it as solved. Thanks! — Andrew Klatzke, Jan 22 '13 at 19:36

score 3 · Answer 1 · answered Apr 05 '14 at 11:20

3

DynaTree is now FancyTree and in fancytree , here is what I did.

.fancytree-container,
table.fancytree-container,
ul.fancytree-container,
span.fancytree-focused span.fancytree-title
{
  border: 0 ; 
  outline: 0; 
  -moz-outline-style: none; 
}

answered Apr 05 '14 at 11:20

django

2,809
5
47
80

score 2 · Answer 2 · answered Nov 08 '13 at 14:59

To fix this you just need to remove

border: 1px dotted gray;

from this ul.dynatree-container on ui.dynatree.css

code should end up looking like this:

ul.dynatree-container
{
    font-family: tahoma, arial, helvetica;
    font-size: 10pt; 
    white-space: nowrap;
    padding: 3px;
    margin: 0; 
    background-color: #CCCCCC solid 1px;

    /*border: 1px dotted gray;*/

    overflow: auto;
    height: 100%; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

Or just remove dotted

border: 1px gray;

score 0 · Answer 3 · answered Apr 17 '15 at 14:47

0

/* Prevent focus frame */
.fancytree-container:focus {
   outline: none;
}

From the CSS of BootstrapTheme.

answered Apr 17 '15 at 14:47

Claudio Badii

53
1
8

Remove Highligthing From Dynatree Checkbox Mode When Clicked or Hover

3 Answers3