Altinn / Altinn/app-frontend-react
Improved Checkbox ROW Display Configuration
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
### Feature Request: Improved Checkbox Display Configuration
#### Description:
When using multiple checkboxes configured for row display, the current layout becomes cluttered and difficult to read. We need a more flexible and visually appealing way to display checkboxes, especially for forms that need to look similar to those in Altinn 2.
#### Suggested Solutions:
1. **Fixed Row Sizes:**
- Allow users to set fixed sizes for rows to ensure consistent appearance.
- This will help maintain uniformity and readability across different screen sizes and forms.
2. **Row Count Configuration:**
- Provide an option to specify the number of rows for checkbox display.
- This will give form owners control over the layout, making it easier to organize and present the checkboxes in a clear manner.
3. **Responsive Design for Smaller Screens:**
- Implement a feature where the checkbox view switches to column display on smaller screens.
- This will prevent the layout from breaking and ensure that the checkboxes remain accessible and easy to interact with on mobile devices.
#### Example Use Case:
The form owner wants the checkbox appearance to closely resemble the layout in Altinn 2, which is more organized and user-friendly. By implementing the above solutions, we can achieve a more consistent and professional appearance for checkboxes, regardless of the number of options or the screen size.
#### Current Display Issues:
- **Row Display:** When configured for row display, the checkboxes appear cluttered and messy.
- **Column Display:** Displaying checkboxes in columns leads to a very long list.
- **Altinn 2 Comparison:** The current form does not match the look of forms in Altinn 2.
#### Desired Outcomes:
- **Consistency:** Uniform row sizes and configurable row counts to maintain a tidy and readable layout.
- **Responsiveness:** A layout that adapts to screen size changes, switching to a column view on smaller screens to preserve usability.
- **Improved User Experience:** A visually appealing form that resembles the layout of Altinn 2 forms.
#### Visual References:
1. **Current Row Display:**
- Image showing the current messy row display of checkboxes.

2. **Current Column Display:**
- Image showing the excessively long list of checkboxes in column display.

3. **Altinn 2 Form Display:**
- Image showing the appearance from Altinn 2 forms.

By addressing these points, we can significantly enhance the usability and appearance of forms that use checkboxes. This improvement will align the forms more closely with the established standards of Altinn 2, leading to a better user experience.
Feature Request is improved by Copilot.
---
### Additional Information
Component configuration:
```
{
"id": "illnesses",
"type": "Checkboxes",
"textResourceBindings": {
"title": "illness"
},
"dataModelBindings": {
"simpleBinding": "HealthInfo.Illnesses"
},
"layout": "row",
"required": false,
"optionsId": "illnesses"
},
```
Contributor guide
Research direction
The issue names no files, tests, or entry points. Start by locating the checkbox component and its row/column layout configuration, then compare the current behavior with the supplied screenshots and configuration example. Done should include an agreed design for fixed sizing, row counts, and responsive column behavior, with coverage for the supported layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100