Altinn / Altinn/app-frontend-react
Grid and innerGrid not working on mobile version of repeating table
- 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

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:

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