I am trying to use a MenuTree component in a flex container with a flex-basis of auto.
When I do this the menu is rendered with 0 height. I've had a quick play with the CSS and can't seem to trick any of the DOM elements to understand the content dimentions.
To replicate create a view with a flex root type. Add a menuTree component and set basis to auto. It should disappear. What I would expect is that it resizes to the required height to render the elements inside it.
Here is the JSON for a view setup already.
Any ideas?
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "MenuTree"
},
"position": {
"shrink": 0
},
"props": {
"items": [
{
"backActionText": "",
"enabled": true,
"items": [
{
"backActionText": "",
"enabled": true,
"items": [],
"label": {
"icon": {
"path": ""
},
"text": "Submenu item 1"
},
"navIcon": {
"path": ""
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
},
{
"backActionText": "",
"enabled": true,
"items": [],
"label": {
"icon": {
"path": ""
},
"text": "Submenu item 2"
},
"navIcon": {
"path": ""
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
}
],
"label": {
"icon": {
"path": "material/list"
},
"text": "Menu Item 1"
},
"navIcon": {
"color": "",
"path": "material/chevron_right"
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
},
{
"backActionText": "",
"enabled": true,
"items": [
{
"backActionText": "",
"enabled": true,
"items": [],
"label": {
"icon": {
"path": ""
},
"text": "Submenu item 1"
},
"navIcon": {
"path": ""
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
},
{
"backActionText": "",
"enabled": true,
"items": [],
"label": {
"icon": {
"path": ""
},
"text": "Submenu item 2"
},
"navIcon": {
"path": ""
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
}
],
"label": {
"icon": {
"path": "material/list"
},
"text": "Menu Item 2"
},
"navIcon": {
"color": "",
"path": "material/chevron_right"
},
"resetOnClick": false,
"showHeader": true,
"style": {
"classes": ""
},
"target": "",
"visible": true
}
]
},
"type": "ia.navigation.menutree"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}