How to remove frame around ActiveWidgets tree
Hi *,
I'd like to seamlessly integrate the ActiveWidgets tree into my webpage. The tree itself has background color "transparent" by default, which suits my purposes. But is it possible to make the frame around the tree disappear completely? Setting the CSS "border" attribute to "none" alone didn't yield the expected result.
Kind regards,
Michael
March 9,
Did you set the right border style? Try it like this to check -
obj.setStyle("border", "none")
Replace "obj" with your object's name. This worked fine for me when I copied the example page and set the style as above.
Anthony
March 9,
Hi Anthony,
I tried the following code, but it didn't do the trick fo rme:
<code class='aw-code-block'>
tree.setStyle("border","none");
tree.refresh();
</code>
The border attribute creates an additional frame around the tree's innate box. Is it possible to make that box disappear at all? It is the same type of box as inside this "Post a reply" input field that I'm currently writing in. Can one remove that box at all or change the box's frame color?
Kind regards
Michael
March 10,
Er, what browser are you using?
I've just tried it with the file I set up locally against IE, FireFox and Netscape 7.2 and 8.1 (didn't work with NS 4.x).
Both with a different coloured border and no border. So you're either using a different browser or something else odd in your code.
My code looks like this -
var obj = new AW.UI.Tree
obj.setItemText(["", "Home", "Favorites", "Font size", "Search", "Child node 1", "Child node 2"])
obj.setItemImage(["", "home", "favorites", "fontsize", "search"])
obj.setViewCount(function(i){return tree[i] ? tree[i].length : 0})
obj.setViewIndices(function(i){return tree[i]})
obj.setStyle("border", "none")
document.write(obj)
which is virtually right off the example page.
Anthony
March 10,
Hi Anthony,
thank you for your reply. I'm actually using IE, too. You won't see what I'm writing about, unless you change the background color of the page. Please try the following code in IE:
<html>
<head>
<script src=aw.js></script>
<link href=aw.css rel=stylesheet></link>
</head>
<body bgcolor=silver>
<script>
var obj = new AW.UI.Tree ;
obj.setItemText(["", "Home", "Favorites", "Font size", "Search", "Child node 1", "Child node 2"]) ;
obj.setItemImage(["", "home", "favorites", "fontsize", "search"]) ;
var tree = {0:[1,2,3,4],1:[5,6]};
obj.setViewCount(function(i){return tree[i] ? tree[i].length : 0}) ;
obj.setViewIndices(function(i){return tree[i]}) ;
obj.setStyle("border", "none") ;
document.write(obj) ;
</script>
</body>
</html>
Kind regards
Michael
March 10,
OK, that makes it clearer now.
It actually shows up in all browsers once you know what you're looking for.
I added this bit of code to the example -
obj.setStyle("border", "3px solid red")
obj.setStyle("padding", "3px")
obj.setStyle("background-color", "silver")
and played around with it. Eventually, I realised the box was around the list and checked it with FireBug.
The span has a class called .aw-list-box. You can control it with this style -
.aw-list-box {border:none}
Anthony
March 10,
Hi Anthony,
thank you very much for this import piece of information. This really did the trick for me. There's no frame visible anymore!
Thanks
Michael
March 11,
Excellent! For problems like this I'd recommend using FireFox with the FireBug debugger. Its not easy to use but better than nothing. I'm not sure if IE has anything comparable but look around if you wish to just stick with it.
Anthony
March 11,