Wrapping of Menu item

Ignition
,
1

Hi,

image
image467×276 4.04 KB

I'm using a Tree component here.

How do i wrap a menu-item?

Thanks!

2

You'll need to adjust the style properties of the tree, likely on the selectedStyle and unselectedStyle properties. White-space, wrap-mode, and possibly max-width are properties you might need to adjust to get your text to wrap.

Since the tree defaults to scrolling sideways if text overflows, you may need to adjust this setting as well.

3 
{
  "textOverflow": "truncate",
  "expandIcons": {
    "collapsed": {
      "path": "material/arrow_right",
      "color": "#000000",
      "style": {}
    },
    "expanded": {
      "path": "material/arrow_drop_down",
      "color": "#000000",
      "style": {}
    },
    "empty": {
      "path": "",
      "color": "#000000",
      "style": {}
    }
  },
  "defaultNodeIcons": {
    "expanded": {
      "path": "material/folder_open",
      "color": "#000000",
      "style": {
        "zoom": ""
      }
    },
    "collapsed": {
      "path": "material/folder",
      "color": "#000000",
      "style": {}
    },
    "empty": {
      "path": "material/stop",
      "color": "#000000",
      "style": {
        "fill": "#000000",
        "fontSize": 19
      }
    }
  },
  "selectedStyle": {
    "fontFamily": "Verdana",
    "fontSize": 14,
    "overflowWrap": "break-word",
    "textOverflow": "clip"
  },
  "unselectedStyle": {
    "fontFamily": "Verdana",
    "fontSize": 14,
    "overflowWrap": "break-word",
    "textOverflow": "clip"
  },
  "rowHeight": 35
}

Here's my props.appearance.... And the menu item is still not being wrapped...

image
image394×226 7.81 KB

Am i doing something wrong?

4

I got this from Gemini and edited some parts of it to apply the changes to only one style class. It worked when I tested.
You can add this on advanced style sheet and apply the style class wrap-tree to your tree component.

.psc-wrap-tree .tree-item {
    height: fit-content !important;
    padding: 3px 0px;
}

.psc-wrap-tree .tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap;
}

.psc-wrap-tree .text-scroll {
    padding-top: 2px;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
}

.psc-wrap-tree .tree-item-label .label-wrapper {
    align-items: start;
}