Text being clipped where tags used

[George SParticipant]

Hello,
When using jqxtree, I am creating 4 root nodes with a graphic. The nodes create fine… I want to make them look a little different since they are root nodes, so I added the HTML <h6> tag. When I do so, the text takes more space to display, but it is being clipped. It is like the last pixels have been erased. As a test case, I have created 4 nodes with <h6> tag, then the same 4 nodes without the <h6> tag. The first 4 nodes do not display properly, while the bottom 4 do… If I replace the <h6> tag with <b>, while the text is wider, it still displays fine…

// Create the Analysis Controls....
// Create the Tree on the left of the analysis page
$('#AnalysisBodyLeft').jqxTree({  height: '100%', width: '100%', theme: 'fresh' });

// Create the Splitter
$("#AnalysisBodyAll").jqxSplitter({
    width: '1200px',
    height: '800px',
    theme: 'fresh',
    panels: [{ size: 400 }, { size: 800}, {collapsible:'true'}]
});

// Create the Tab Control on the right
 $("#AnalysisBodyRight").jqxTabs({  height: '100%', width: '100%', theme: 'fresh' });

// Clear out all entries in our jqxTree which lists all accounts
$("#AnalysisBodyLeft").jqxTree('clear');

// Now add our 4 root nodes (they display wrong)
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'1', label: '<h6>Most Likely</h6>', icon:'#WORKSPACE_IMAGES#images/best_guess_account.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'2', label: '<h6>Accounts / Subsidiaries</h6>', icon:'#WORKSPACE_IMAGES#images/business.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'3', label: '<h6>Parent Accounts</h6>' , icon:'#WORKSPACE_IMAGES#images/up_one_level.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'4', label: '<h6>Ultimate Parent Accounts</h6>', icon:'#WORKSPACE_IMAGES#images/up_multiple_levels.png'});

// Now add our 4 root nodes (these display properly)
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'5', label: '<b>Most Likely</b>', icon:'#WORKSPACE_IMAGES#images/best_guess_account.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'6', label: '<b>Accounts / Subsidiaries</b>', icon:'#WORKSPACE_IMAGES#images/business.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'7', label: '<b>Parent Accounts</b>' , icon:'#WORKSPACE_IMAGES#images/up_one_level.png'});
$("#AnalysisBodyLeft").jqxTree('addTo', {id:'8', label: '<b>Ultimate Parent Accounts</b>', icon:'#WORKSPACE_IMAGES#images/up_multiple_levels.png'});

While I can work around this issue, this definitely appears to be a bug… Any thoughts?

Thanks

[HristoParticipant]

Hello George S,

The appropriate way to create jqxTree is to use UL and LI tags instead of h6 and b tags.
Use CSS to styling the elements.
We have a topic that could be helpful:
http://www.jqwidgets.com/community/topic/add-imagesicons-to-tree-nodes-programatically/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

In looking at this post , in the 2nd entry, someone from your support group specifically states that using HTML attribute ‘<b>’ is a proper and supported practice. If that is the case, what HTML tags are valid and what are invalid?

POST-EDIT. Link does not appear, so here it is: http://www.jqwidgets.com/community/topic/how-to-dynamically-insert-html-li-items/#post-1876

[Peter StoevKeymaster]

We see no clipping issue: http://jsfiddle.net/jqwidgets/1umf4g30/

[George SParticipant]

Since I don’t have a public server, how do I send you images? aka do you have a system where I can upload images into this post?

[Peter StoevKeymaster]

Hi George S,

If your images are with variable size, I suggest you putting width and height of them when you display them in a Tree. Otherwise, you will always end up with cut out content since images in web pages are loaded dynamically and if size is set, the widget will be able to calculate its tree item’s size.

Regards,
Peter

[Author]

Posts