Altinn / Altinn/app-frontend-react

Specify column width for Likert component

Open
#914 0 comments 0 reactions 0 assignees View on GitHub
kind/feature-request org/ssb org/udir
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description

We would like to specify column width for [Likert component](https://docs.altinn.studio/app/development/ux/components/likert/) when displayed as a Table. Today the width is calculated automatic, in some cases this doesn't look good.

### Additional Information

Config alt 1:
Specify the width property in the options file:
```json
[
{
"label": "Alltid",
"value": "1"
"width": "auto"
},
{
"label": "Nesten alltid",
"value": "2",
"width": "200px"
}
]
```

Config alt 2:
Specify columnWidth in layout.json:
```json
{
"id": "likert-row",
"type": "Likert",
"textResourceBindings": {
"title": "likert-row-title"
},
"dataModelBindings": {
"simpleBinding": "Questions.Answer"
},
"columnWidth": ["auto", "100px"],
"optionsId": "likertOptions",
"required": false,
"readOnly": false
}
```

Config alt 3:
Usually you would only want to specify equal width of each option column and one width for the first column, instead of specifiyng for every column seperatly.
Specify columnWidth in layout.json:
```json
{
"id": "likert-row",
"type": "Likert",
"textResourceBindings": {
"title": "likert-row-title"
},
"dataModelBindings": {
"simpleBinding": "Questions.Answer"
},
"columnWidth": {
"firstColumn": "auto",
"optionColumns": "100px",
},
"optionsId": "likertOptions",
"required": false,
"readOnly": false
}
```

A workaround we will use until this is released will be to add custom css in the index.html file:
```css
main th:first-child {
width: auto;
}
main th {
width: 100px;
}
```

Contributor guide

Open the contributing guide

Research direction

Start with the Likert component documentation and locate the implementation of its table rendering in the TypeScript React frontend. Compare the three proposed configuration shapes and the current automatic sizing behavior, then confirm the chosen API handles the first and option columns as described. Done means column widths can be configured without the custom CSS workaround and the behavior is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.