ioBroker.admin
ioBroker.admin copied to clipboard
jsonConfig: Table column width specified as percent does not work
Describe the bug
When using jsonConfig.json to configure a table a width specified as percent does not show any effect.
To Reproduce
- create a new using npx @iobroker/create-adapter
- add json gui attribute to io-package.json
"adminUI": {
"config": "json"
},
- create the following jsonConfig.json
{
"i18n": true,
"type": "tabs",
"items": {
"devices": {
"type": "panel",
"label": "Devices",
"items": {
"ips": {
"type": "table",
"sm": 10,
"md": 10,
"lg": 10,
"label": "Devices",
"items": [
{
"type": "checkbox",
"attr": "enabled",
"width": "10%",
"title": "enable",
"filter": false,
"sort": false,
"default": false
},
{
"type": "number",
"min": 1,
"max": 999,
"step": 1,
"attr": "id",
"width": "30%",
"title": "id",
"filter": true,
"sort": true,
"default": ""
},
{
"type": "text",
"attr": "ip",
"width": "60%",
"title": "ip address",
"filter": true,
"sort": true,
"default": ""
}
]
}
}
}
}
}
- create a new instance of adapter and open config page
When specifiying the three width fields as "10%","30%" and "60%" all three columns are approximatly of same width, When specifying the width as "123px" the width can be conztrolled. When specifiying the three width fields as "10% ","30% " and "60% " (note the trailing blank!") the three columns are of different width as expected.
Expected behavior
The column width should be controlled by specifying percentage values.
Screenshots & Logfiles
Versions:
- Adapter version: Admin 5.3.1
- JS-Controller version: 3.3.22 - using dev-server
- Node version: v14.19.0
- Operating system: Windows 10
Additional context
I assume that the following line (#250) from module ConfigTable.js
(https://raw.githubusercontent.com/ioBroker/ioBroker.admin/master/src-rx/src/components/JsonConfigComponent/ConfigTable.js)
could cause this effect as a width value ending with % seems to be converted to auto only. (But consider this only as a hint - I do not sufficiently undersatnd the complete code structure! )
<TableCell
style={{ width: typeof headCell.width === 'string' && headCell.width.endsWith('%') ? 'auto' : headCell.width }}
key={headCell.attr}
@GermanBluefox
Specifiying an absolute width in px does not seem to work too. Maybe you could check this at the same time.
If I use width: "50px" or width: "50" or width: 50 the displayed width seems to be random and not be influenced by this statement. As I think this problem might be realted to the % problem, I do not open a new issue. Pleas respond if a new issue would be desired.
Fixed in Admin6:
I suggest to use for first column fixed width: 60
@mcm1957 Can you please check with current admin version if this issue is fixed?
Looks like this isn't fixed (anymore) (admin 6.12.8)