angular icon indicating copy to clipboard operation
angular copied to clipboard

Dynamic form live example: input field for "First name" is not rendered correctly

Open an-gu99 opened this issue 2 years ago • 2 comments

Describe the problem that you experienced

input field for "First name" looks the same as input field for "Email" even though there is an explicit CSS rule for input[type="text"] in styles.css

Reason is that the type of QuestionBase - object is '' by default and this is assigned to the [type] of the "<input>" element. "<input type=''>" doesn't seem right to me.

On the other hand: the correct rendering ("width: 100%") doesn't look good on a wider viewport.

1st question: should it be changed at all?

In case it should be changed my suggested solution of a pool of possible solutions is: a) provide type-property when construction 'First name' in question.service.ts and d) remove or adapt CSS rule

Happy to do the PR if I know which one is the right solution for Angular.

More possible solutions: a) provide type-property when constructing 'First name' in question.service.ts b) add default type to question-textbox.ts c) add default type in constructor in question-base.ts d) remove / adapt CSS rule e) leave it like it is (it looks good) f) ...

Enter the URL of the topic with the problem

https://angular.io/guide/dynamic-form

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

No response

an-gu99 avatar Jan 31 '23 17:01 an-gu99

I'd say, the displayed result is as expected.

The stylesheet you see at the root of the project is actually shared across all examples :

https://github.com/angular/angular/blob/2fc5b70fcedb8ac35b825b245c0ae394dc125244/aio/tools/examples/shared/boilerplate/common/src/styles.css#L78-L82

JeanMeche avatar Jan 31 '23 18:01 JeanMeche

I myself tend to believe that the displayed result is fine but I am not sure if the type of the "input"-HTML-element should really be empty.

an-gu99 avatar Jan 31 '23 18:01 an-gu99

With angular.io going into maintenance mode, we won't provide any updates to it. If you see any issues with the new https://angular.dev site, feel free to file a new issue.

Thank you for your understanding.

JeanMeche avatar Apr 07 '24 08:04 JeanMeche

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.