PDA

View Full Version : JQuery TreeView Large, issue with modifications



ironclads
02-25-2015, 05:47 AM
I'm starting out with the large example in the jquery.treeview.zip. When I attempt to modify the example a bit, I can't actually change the width of the spans I've embedded into the <LI> tags. Nothing I do will seem to let me change the width. They default to the length of the text in them and that's it. Is there a way, or where in the css or js files would I change code in order to be able to change the width.

Original looks like this:

<ul id="tree">
<li><a href="?/index.cfm"><strong>Home</strong></a>
<ul>
<li><a href="?/enewsletters/index.cfm">Airdrie eNewsletters </a></li>
<li><a href="?/index.cfm">Airdrie Directories</a></li>
<li><a href="?/economic_development/video/index.cfm">Airdrie Life Video</a></li>

<li><a href="?/index.cfm">Airdrie News</a></li>
<li><a href="?/index.cfm">Airdrie Quick Links</a></li>
<li><a href="?http://weather.ibegin.com/ca/ab/airdrie/">Airdrie Weather</a></li>
<li><a href="?/human_resources/index.cfm">Careers</a> | <a href="?/contact_us/index.cfm">Contact Us</a> | <a href="?/site_map/index.cfm">Site Map</a> | <a href="?/links/index.cfm">Links</a></li>

<li><a href="?/calendars/index.cfm">Community Calendar </a></li>
<li><a href="?/conditions_of_use/index.cfm">Conditions of Use and Privacy Statement</a></li>
<li><a href="?/index.cfm">I'd like to find out about... </a></li>
<li><a href="?/index.cfm">Opportunities</a></li>
<li><a href="?/links/index.cfm">Resource Links</a></li>
<li><a href="?/index.cfm">Special Notices</a></li>

</ul>

My modified code looks like this:

<ul id="tree">
<li><a href="?/index.cfm"><strong>Home</strong></a>
<ul>
<li><a href="?/enewsletters/index.cfm">Airdrie eNewsletters </a></li>
<li><a href="?/index.cfm">Airdrie Directories</a></li>
<li><a href="?/economic_development/video/index.cfm">Airdrie Life Video</a></li>
<li><a href="?/index.cfm"><SPAN CLASS="COL1" ID="T1" STYLE="width:170px; background-color: #FF0000;">Airdrie Directories</SPAN><SPAN CLASS="COL2">TEstCol2</SPAN><SPAN CLASS="COL3">TestCol3</SPAN></a></li>
<li><a href="?/index.cfm"><TABLE><TR><TD STYLE="width:300; background-color: #FF00FF;">Airdrie Quick Links</TD></TR></TABLE></a></li>
<li><a href="?http://weather.ibegin.com/ca/ab/airdrie/">Airdrie Weather</a></li>
<li><a href="?/human_resources/index.cfm">Careers</a> | <a href="?/contact_us/index.cfm">Contact Us</a> | <a href="?/site_map/index.cfm">Site Map</a> | <a href="?/links/index.cfm">Links</a></li>

<li><a href="?/calendars/index.cfm">Community Calendar </a></li>
<li><a href="?/conditions_of_use/index.cfm">Conditions of Use and Privacy Statement</a></li>
<li><a href="?/index.cfm">I'd like to find out about... </a></li>
<li><a href="?/index.cfm">Opportunities</a></li>
<li><a href="?/links/index.cfm">Resource Links</a></li>
<li><a href="?/index.cfm">Special Notices</a></li>

</ul>

As you can see, I've tried both SPAN and TABLE to create a wider column, but neither will work. I've tried coding the width into a class and just inline. I can change all kinds of other properties, but not width/height. Does anyone here know how I could change the width of values embedded in the <LI> tags? I'm hoping to be able to have columns inside these <LI> tags and be able to use CSS/JavaScript to dynamically size them as needed. Any ideas or help is greatly appreciated. Let me know if you have any questions. Thank you.

Beverleyh
02-25-2015, 12:47 PM
Spans are inline elements by default so they only taking up the minimum space necessary. To change this behaviour, you would need to set them to display:inline-block;, then you can add paddings and width, etc.

Using one of your spans as an example; <SPAN CLASS="COL1" ID="T1" STYLE="display:inline-block; width:170px; background-color: #FF0000;">Airdrie Directories</SPAN>

If you need more help, please provide a link to your page.

ironclads
02-25-2015, 05:18 PM
Thank you. I find it's the simple things in life that mean the most, and it's the simple things in code that mess me up. :o Thank you for helping me see the forest through the trees. :D


Spans are inline elements by default so they only taking up the minimum space necessary. To change this behaviour, you would need to set them to display:inline-block;, then you can add paddings and width, etc.

Using one of your spans as an example; <SPAN CLASS="COL1" ID="T1" STYLE="display:inline-block; width:170px; background-color: #FF0000;">Airdrie Directories</SPAN>

If you need more help, please provide a link to your page.