jQuery UI Widgets › Forums › Navigation › Tree › 48 x 16 icon (can I put wider icons in my tree)?

Tagged: , , , , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  steff_dk 10 years, 6 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.