jQWidgets Forums

Tagged: icon, iconsize, jqxtree, size, text, Tree, wrap

This topic contains 5 replies, has 2 voices, and was last updated by steff_dk 11 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

48 x 16 icon (can I put wider icons in my tree)? Posts
March 25, 2014 at 11:52 am 48 x 16 icon (can I put wider icons in my tree)? #51842

steff_dk
Participant

I have a tree structure where I am using different 16 x 16 icons to show folders/docs etc.

I would like to be able to show a status like red/yellow/green in the tree also.
Can I modify it to accommodate 48 px wide icons?

Cheers!

March 26, 2014 at 6:49 am 48 x 16 icon (can I put wider icons in my tree)? #51900
Dimitar
Participant
Hello steff_dk,

You can easily achieve this, if you initialize the tree form an HTML structure (as in the demo Navigation) – the image will be displayed in its actual size (48×16 px).

If you initialize the tree from a source, you have the iconsize property, which will make the icon larger, but still square. E.g. this code will make the icon 48×48 px:
```
var source = [
{
    icon: "../../images/48pxWide.png", iconsize: 48, label: "Mail", expanded: true, items: [
        { icon: "../../images/calendarIcon.png", label: "Calendar" },
        { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
    ]
},
```
Then add the following style to your page, which will make the image 48×16 px:
```
<style type="text/css">
    .jqx-tree-item img
    {
        height: 16px;
    }
</style>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
March 27, 2014 at 10:58 am 48 x 16 icon (can I put wider icons in my tree)? #52053

steff_dk
Participant

So I ended up using 46×16 px icons, implementing the method above.

Now however, the labels wrap the last 5 characters to a new line.
It doesn’t seem to be the width of the jqxTree that is causing this.

Can I prevent the wrapping?

March 27, 2014 at 11:55 am 48 x 16 icon (can I put wider icons in my tree)? #52069

steff_dk
Participant

Tried to initialize from a source with no iconsize specified, and then setting the .jqx-tree-item img {width: 46px}.

Same result … Last five chars wrap to new line (wraps in the middle of a word, not in white-space).

March 27, 2014 at 12:44 pm 48 x 16 icon (can I put wider icons in my tree)? #52077

Dimitar
Participant

Hi steff_dk,

Could you, please, post a JSFiddle example which demonstrates the reported behaviour?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 31, 2014 at 6:12 am 48 x 16 icon (can I put wider icons in my tree)? #52207

steff_dk
Participant

Realised this was only happening in IE8 on our intranet.

Fixed the issue with:

$(‘.jqx-tree-item-li div’).css(‘max-width’, ”);
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.