Altinn / Altinn/app-frontend-react

Grid and innerGrid not working on mobile version of repeating table

Open
#1,583 1 comment 0 reactions 0 assignees View on GitHub
kind/bug org/ssb
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

When zooming into a repeating table view like this
![image](https://github.com/Altinn/altinn-studio/assets/42466346/54a98733-02e2-4c5d-be6f-44d651934ec0)
I should still be able to use the "grid"-option when the view changes, so the inputfield doesn't fill the hole width of the page. (It would actually be a good thing if one could use an inner grid in the table view as well, because sometimes the "tableTitle" is very long compared to the value that you want to write in the field)

This picture illustrates what I got, and what I would have expected:
![image](https://github.com/Altinn/altinn-studio/assets/42466346/afd815f3-e566-4817-a55e-7851affc8917)

The input-field with the correct size, is an exact copy of the input-field used in the repeating table (just with a different ID).

### Steps To Reproduce

1. Create an Inputfield (or probably any other field type that should support grid-options)
You can use a very simple grid like this:
`"grid": { "innerGrid": {
"xs": 3
}
}`
2. Put the field inside a repeating table
3. Zoom in until you get the look of a "small screen"/mobile view, then you will see the problem.

### Additional Information

Here is a copy of the part of my formpage json-file that shows this problem:
{
"id": "Group-Test-av-klass-kall",
"type": "Group",
"textResourceBindings": {
"summaryTitle": "S07_SalgTilSluttbrukere.Paragraph-oBy0zf.title",
"summaryAccessibleTitle": "Endre antall MWh eller prosentandel til transport"
},
"children": [
"Naeringsomraade-repTabell",
"Beloep-MWh-tabell",
"Beloep-prosent-tabell"
],
"tableHeaders": [
"Naeringsomraade-repTabell",
"Beloep-MWh-tabell",
"Beloep-prosent-tabell"
],
"tableColumns": {
"Naeringsomraade-repTabell": {
"editInTable": false,
"showInExpandedEdit": true,
"alignText": "left",
"width": "60%"
},
"Beloep-MWh-tabell": {
"editInTable": true,
"showInExpandedEdit": false,
"alignText": "left"
},
"Beloep-prosent-tabell": {
"editInTable": true,
"showInExpandedEdit": false,
"alignText": "left",
"width": "16%"
}
},
"minCount": 1,
"maxCount": 30,
"dataModelBindings": {
"group": "SkjemaData.biogassLevert.naeringstabell"
},
"rowsAfter": [
{
"readOnly": true,
"cells": [
{
"text": "I alt",
"alignText": "right"
},
{
"text": ""
},
{
"text": ""
}
]
}
],
"edit": {
"alwaysShowAddButton": false,
"editButton": false,
"saveButton": false,
"addButton": false,
"deleteButton": false
}
},
{
"id": "Naeringsomraade-repTabell",
"type": "Dropdown",
"optionsId": "lisensarter",
"textResourceBindings": {
"tableTitle": "S07_Biogass.Levert.naeringsomraade.title",
"title": "S07_Biogass.Levert.naeringsomraade.title"
},
"dataModelBindings": {
"simpleBinding": "SkjemaData.biogassLevert.naeringstabell.naeringsId"
}
},
{
"id": "Beloep-MWh-tabell",
"type": "Input",
"dataModelBindings": {
"simpleBinding": "SkjemaData.biogassLevert.naeringstabell.sluttbrukerNorgeMWh"
},
"required": true,
"formatting": {
"align": "right",
"number": {
"thousandSeparator": " ",
"allowNegative": false,
"suffix": " MWh"
}
},
"textResourceBindings": {
"title": "S07_Biogass.Levert.MWh.Input.title",
"requiredValidation": [
"concat",
[
"text",
"S07_Biogass.Levert.MWh.validering.start"
],
" ",
[
"displayValue",
"Naeringsomraade-repTabell"
]
]
},
"grid": {
"innerGrid": {
"xs": 3
}
}
},
{
"id": "Beloep-prosent-tabell",
"type": "Input",
"dataModelBindings": {
"simpleBinding": "SkjemaData.biogassLevert.naeringstabell.prosentTransportSluttbruker"
},
"required": true,
"textResourceBindings": {
"title": "S07_Biogass.Levert.transport.prosent.title",
"requiredValidation": [
"concat",
[
"text",
"S07_Biogass.Levert.prosent.validering.start"
],
" ",
[
"displayValue",
"Naeringsomraade-repTabell"
]
]
},
"formatting": {
"align": "right",
"number": {
"thousandSeparator": " ",
"allowNegative": false,
"suffix": " %"
}
},
"grid": {
"innerGrid": {
"xs": 3
}
}
},
{
"id": "KOPI-Beloep-MWh-tabell",
"type": "Input",
"dataModelBindings": {
"simpleBinding": "SkjemaData.biogassLevert.naeringstabell.sluttbrukerNorgeMWh"
},
"required": true,
"formatting": {
"align": "right",
"number": {
"thousandSeparator": " ",
"allowNegative": false,
"suffix": " MWh"
}
},
"textResourceBindings": {
"title": "S07_Biogass.Levert.MWh.Input.title",
"requiredValidation": [
"concat",
[
"text",
"S07_Biogass.Levert.MWh.validering.start"
],
" ",
[
"displayValue",
"Naeringsomraade-repTabell"
]
]
},
"grid": {
"innerGrid": {
"xs": 3
}
}
},
{
"id": "KOPI-Beloep-prosent-tabell",
"type": "Input",
"dataModelBindings": {
"simpleBinding": "SkjemaData.biogassLevert.naeringstabell.prosentTransportSluttbruker"
},
"required": true,
"textResourceBindings": {
"title": "S07_Biogass.Levert.transport.prosent.title",
"requiredValidation": [
"concat",
[
"text",
"S07_Biogass.Levert.prosent.validering.start"
],
" ",
[
"displayValue",
"Naeringsomraade-repTabell"
]
]
},
"formatting": {
"align": "right",
"number": {
"thousandSeparator": " ",
"allowNegative": false,
"suffix": " %"
}
},
"grid": {
"innerGrid": {
"xs": 3
}
}
},

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue using the provided repeating-table form configuration, especially the Input fields with grid.innerGrid.xs set to 3, and compare the mobile-sized view with the copied fields outside the table. No source file or test is named; done means grid and innerGrid sizing remains effective for table fields when the viewport is reduced or zoomed.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.