ioBroker.admin icon indicating copy to clipboard operation
ioBroker.admin copied to clipboard

jsonConfig: Table column width specified as percent does not work

Open mcm1957 opened this issue 3 years ago • 3 comments
trafficstars

Describe the bug

When using jsonConfig.json to configure a table a width specified as percent does not show any effect.

To Reproduce

  1. create a new using npx @iobroker/create-adapter
  2. add json gui attribute to io-package.json
"adminUI": {
	"config": "json"
},
  1. 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": ""
                        }
                    ]
                }
            }
        }
    }
}
  1. 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}

mcm1957 avatar Feb 27 '22 11:02 mcm1957

@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.

mcm1957 avatar Apr 06 '22 09:04 mcm1957

Fixed in Admin6: image I suggest to use for first column fixed width: 60

GermanBluefox avatar Jun 03 '22 09:06 GermanBluefox

@mcm1957 Can you please check with current admin version if this issue is fixed?

Feuer-sturm avatar Aug 01 '22 17:08 Feuer-sturm

Looks like this isn't fixed (anymore) (admin 6.12.8)

hombach avatar Dec 10 '23 20:12 hombach