Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(form-generator: radio) radio buttons misaligned on small screens #11003

Open
MichaelSp opened this issue Nov 24, 2023 · 0 comments · May be fixed by #12700
Open

(form-generator: radio) radio buttons misaligned on small screens #11003

MichaelSp opened this issue Nov 24, 2023 · 0 comments · May be fixed by #12700
Assignees

Comments

@MichaelSp
Copy link
Member

MichaelSp commented Nov 24, 2023

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Radio buttons in the form generator are misaligned if the screen width passes a specific threshold.

Can you handle that on the application side

Yes, workaround with some creative CSS should be possible

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

    "@angular/animations": "^16.2.2",
    "@angular/cdk": "^16.2.1",
    "@angular/common": "^16.2.2",
    "@angular/compiler": "^16.2.2",
    "@angular/core": "^16.2.2",
    "@angular/elements": "^16.2.2",
    "@angular/forms": "^16.2.2",
    "@angular/localize": "^16.2.2",
    "@angular/platform-browser": "^16.2.2",
    "@angular/platform-browser-dynamic": "^16.2.2",
    "@angular/router": "^16.2.2",
    "@fundamental-ngx/core": "0.45.1",
    "@fundamental-ngx/platform": "0.45.1",
    "@fundamental-styles/common-css": "0.30.2",

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Width 536px

image

Width 536.5px

image

Please provide relevant source code (if applicable).

questions: DynamicFormItem<{}, HeaderDynamicFormControl>[] = [
    {
      type: 'header',
      name: 'buildToolHeader',
      message: '',
      guiOptions: {
        additionalData: {
          header: 'Which build tool do you currently use?',
          ignoreTopMargin: true,
        },
      },
    },
    {
      type: 'radio',
      name: 'buildTool',
      message: '',
      guiOptions: {
        inline: true,
      },
      choices: [
        BuildTool.Docker,
        BuildTool.Golang,
        BuildTool.Gradle,
        BuildTool.Maven,
        BuildTool.Mta,
        BuildTool.Npm,
        BuildTool.Python,
      ].map((tool) => ({
        label: tool.charAt(0).toUpperCase() + tool.slice(1).toLocaleLowerCase(),
        value: tool,
      })),
      validators: [Validators.required],
    },
  ]

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

khotcholava pushed a commit that referenced this issue Nov 4, 2024
closes [#11003](#11003)

- fixing segment button value conflict issue
khotcholava added a commit that referenced this issue Nov 7, 2024
closes [#11003](#11003)

- Fixed radio group alignment for form generator
khotcholava added a commit that referenced this issue Nov 7, 2024
khotcholava added a commit that referenced this issue Dec 11, 2024
closes [#11003](#11003)

Fixing e2e tests
khotcholava added a commit that referenced this issue Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants