Hi,
I have a problem with the first item style in my jQuery treeview.
The code for this item is : <span class="spanItemTV">Item 1</span>
(see the code below)
I put a background-color on the item. I would like to set its width to
100%, so that the first item bar covers the entire width screen.
Unfortunately, it doesn't work, the width is limited to the span text
size (here the text : "Item 1").
I did make it work, while deleting the first line of my html file
containing the DOCTYPE instruction. Well, this works only with IE6,
but the problem still remains with other browsers. And I need this
line, it is not a solution, maybe an indication on where the problem
comes from...
Here is my code :
test.css :
.spanItemTV
{
height: 20px;
font-weight: bold;
font-size: 12px;
color:#666666;
background-color: #EEECEC;
text-align: left;
padding: 5px;
width:100%;
}
Test.htm
(all jQuery scripts and stylesheets included are the basics one :
http://jquery.bassistance.de/treeview/jquery.treeview.css
http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
http://jquery.bassistance.de/treeview/jquery.treeview.js)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.treeview.css" />
<link rel="stylesheet" href="test.css" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tv").treeview({
animated: "fast",
collapsed: true,
unique: false,
persist: "cookie",
toggle: function() {
window.console && console.log("%o was toggled",
this);
}
});
});
</script>
</head>
<body>
<ul id="tv" class="treeview-red">
<li><span class="spanItemTV">Item 1</span>
<ul>
<li><span>Item 1.0</span>
<ul>
<li><span>Item 1.0.0</span></li>
</ul>
</li>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span>
<ul>
<li><span>Item 1.2.0</span>
<ul>
<li><span>Item 1.2.0.0</span></li>
<li><span>Item 1.2.0.1</span></li>
<li><span>Item 1.2.0.2</span></li>
</ul>
</li>
<li><span>Item 1.2.1</span>
<ul>
<li><span>Item 1.2.1.0</span></li>
</ul>
</li>
<li><span>Item 1.2.2</span>
<ul>
<li><span>Item 1.2.2.0</span></li>
<li><span>Item 1.2.2.1</span></li>
<li><span>Item 1.2.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="spanItemTV">Item 2</span>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><span>Item 2.0.0</span>
<ul>
<li><span>Item 2.0.0.0</span></li>
<li><span>Item 2.0.0.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Item 2.1</span>
<ul>
<li><span>Item 2.1.0</span>
<ul>
<li><span>Item 2.1.0.0</span></li>
</ul>
</li>
<li><span>Item 2.1.1</span>
<ul>
<li><span>Item 2.1.1.0</span></li>
<li><span>Item 2.1.1.1</span></li>
<li><span>Item 2.1.1.2</span></li>
</ul>
</li>
<li><span>Item 2.1.2</span>
<ul>
<li><span>Item 2.1.2.0</span></li>
<li><span>Item 2.1.2.1</span></li>
<li><span>Item 2.1.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="open"><span class="spanItemTV">Item 3</span>
<ul>
<li class="open"><span>Item 3.0</span>
<ul>
<li><span>Item 3.0.0</span></li>
<li><span>Item 3.0.1</span>
<ul>
<li><span>Item 3.0.1.0</span></li>
<li><span>Item 3.0.1.1</span></li>
</ul>
</li>
<li><span>Item 3.0.2</span>
<ul>
<li><span>Item 3.0.2.0</span></li>
<li><span>Item 3.0.2.1</span></li>
<li><span>Item 3.0.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
So the code above limits the width of each "title" (Item 1/Item2/Item
3) to the width of the text it contains. If you remove the DOCTYPE
instruction in test.html, the width will be 100% in Internet Explorer
6.
I would like it to be real 100% width in every browsers, without
dropping the DOCTYPE line.
Thanks for any advice.
