Wrapping text and overflow - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 9 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Wrapping text and overflow Posts

March 27, 2012 at 5:38 pm Wrapping text and overflow #3092

Member

Is there a way to implement one of the two following options:

1. Wrapping long item labels to multiple lines?
2. Implement the same jxscrolling that is used for vertical overflow for horizontal overflow for a specified width?

Either one would greatly help.

Thanks in advance!

March 27, 2012 at 8:02 pm Wrapping text and overflow #3095

Peter Stoev

Keymaster

Hi Mike,

To wrap long item labels to multiple lines, you can add ‘br’ tags inside the Tree’s LI tags.

For example:

<div id='jqxTree'>
    <ul>
        <li>Home</li>
        <li>Solutions
            <ul>
                <li>Education</li>
                <li>Financial<br />services</li>
                <li>Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo<br />and video</li>
                        <li>Mobile</li>
                        <li>Rich<br />Internet<br />applications</li>
                        <li>Technical<br />communication</li>
                        <li>Training<br />and<br />eLearning</li>
                        <li>Web<br />conferencing</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

2. To enable the horizontal scrolling, you need to set the Tree’s Size(width and height).

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxTree
            $('#jqxTree').jqxTree({ height: '400px', width: '100px'});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree'>
        <ul>
            <li>Home</li>
            <li>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2012 at 8:22 pm Wrapping text and overflow #3098

mbeasley183

Member

As far as the line wrapping with , I’m loading my content dynamically with the source option. So I might have to find a way to calculate the width taking into consideration font size, etc. and then determine whether it needs to be split… I’ll work on that.

As for the width option, I have tried setting the width to a pixel value, to a percent value and not setting it at all. No matter which way that I do it, I get cut off items like this:

March 27, 2012 at 8:31 pm Wrapping text and overflow #3100

Peter Stoev

Keymaster

Thanks for the feedback, Mike.

1. Can you post the part of the code which reproduces the issue or send it to support@jqwidgets.com. We’d like to debug the specific scenario.

2. You can also wrap text with the ‘source’ option as the ‘label’ can be HTML, not just text.

For example:

var source = [
    { label: "Very Long</br>Text", value: 'id1', expanded: true, items: [
        { label: "Calendar" },
        {label: "Contacts", selected: true }
    ]
    },
    {  label: "Inbox", expanded: true, items: [
        { label: "Admin" },
        {  label: "Corporate" },
        { label: "Finance" },
        { label: "Other" },
    ]
    },
    {  label: "Deleted<br/>Items" },
    {  label: "Notes" },
    {  label: "Settings" },
    {  label: "Favorites" },
    ];
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '150px', height: '200px'});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2012 at 8:38 pm Wrapping text and overflow #3101

mbeasley183

Member

Here’s my code (I’m using jQueryUI dialog boxes as the container for the tree):


$dialog = $('<div><div id="jqx"></div></div>');
                    $dialog.dialog({
                        autoOpen: false,
                        hide: "fade",
                        resizable: false,
                        height: 450,
                        width: 350,
                        modal: true,
                        title: title,
                        closeOnEscape: false,
                        draggable: true,
                        open: function() {
                            $('#jqx').jqxTree({
                                source: criteriaList,
                                checkboxes: true,
                                //hasThreeStates: true,
                                toggleMode: 'click',
                                height: 275,
                                width: 300,
                                animationShowDuration: 200,
                                animationHideDuration: 200
                            });
                        },
                        close: function() {
                            $dialog.remove();
                        },
                        buttons: {
                            'Submit': function() {
                                $(this).dialog("close");
                                // get all items.
                                var items = $("#jqx").jqxTree('getItems');
                                // save all checked items in checkedItems array.
                                var checkedItems = new Array();
                                $.each(items, function() {
                                    if (this.checked) {
                                        checkedItems[checkedItems.length] = this.value;
                                    }
                                });
                                console.log(checkedItems); // here is where I would submit the checkedItem codes
                            },
                            'Cancel': function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    $dialog.dialog('open');

April 7, 2012 at 11:27 pm Wrapping text and overflow #3257

Peter Stoev

Keymaster

Hi Mike,

I wanted to let you know that in the latest release(jQWidgets 2.0), we fixed an issue regarding the jqxTree overflow and horizontal scrolling behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 20, 2012 at 6:30 pm Wrapping text and overflow #11237

dhaacke

Member

Peter:

I’m using 2.3.1 and still seeing the label NOT wrap. Any other suggestions?

Thanks in advance, and keep up the GREAT work!

-Doug

November 20, 2012 at 6:42 pm Wrapping text and overflow #11240

Peter Stoev

Keymaster

Hi Doug,

Have you tried the code from my post?

var source = [
    { label: "Very Long</br>Text", value: 'id1', expanded: true, items: [
        { label: "Calendar" },
        {label: "Contacts", selected: true }
    ]
    },
    {  label: "Inbox", expanded: true, items: [
        { label: "Admin" },
        {  label: "Corporate" },
        { label: "Finance" },
        { label: "Other" },
    ]
    },
    {  label: "Deleted<br/>Items" },
    {  label: "Notes" },
    {  label: "Settings" },
    {  label: "Favorites" },
    ];
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '150px', height: '200px'});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 20, 2012 at 6:55 pm Wrapping text and overflow #11242

dhaacke

Member

Peter:

Thanks for the quick reply. You’re awesome!

Yeah, your code works, and I apologize for not being clearer. I assumed when I read the update fixed the issue with overflow, you meant that the tags weren’t necessary.

Our application is fairly dynamic, so programmatically adding breaks will work, but isn’t the ideal situation. I’m experimenting with inlining a block statement, with marginal success. If you have other suggestions, I’d love to hear ’em.

Thanks so much!

-Doug

November 20, 2012 at 6:58 pm Wrapping text and overflow #11243

Peter Stoev

Keymaster

Hi Doug,

Nope, it was an issue with the horizontal scrolling which was resolved. When the content overflowed horizontally, in some cases the hScrollbar was not displayed as expected.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.