Form fields in web pages in project templates appear squished together

[DamianEdwards]

Affected versions: .NET 6 and .NET 7

Seems as part of the migration to Bootstrap 5.x the styling in our templates has resulted in form fields being squashed together in a very unattractive way, e.g.:

Compare this to example form on the Bootstrap docs:

Both screenshots were taken in Edge latest running on Windows 11 running full screen at 4K at 150% scaling. The templates used were latest from the main branch but this reproduces in .NET 6 too.

The effect is exacerbated when an input text field has focus as its border highlight is clipped by the next element in the form, e.g. the button is overlapping the focus border effect of the input field:'

[javiercn]

@DamianEdwards Yeah, I remember discussing this with @HaoK at the time.

I believe this was actually how Bootstrap 5 looks like (at least in some config). @HaoK do you remember the details?

I've looked in the Bootstrap docs and at least a bunch of the form fields look like this, although there are others that present a more "classic" style. I agree its not ideal and we should probably consider changing them.

I've filed a separate issue to discuss the changes/updates for the templates in .NET 7.0 here since there seems to be no issue for that.

[HaoK]

Yeah this was just their default look, definitely not something we went out of our way to choose. I think the only things we tweaked was some of the colors to pass the contrast rules for accessibility

[HaoK]

Their login example doesn't look that diff

Thanks for contacting us.

We're moving this issue to the .NET 7 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[DamianEdwards]

There are subtle differences that (IMO) make a big difference. The stacked input fields example above from their sample removes the rounded corners from the sides where the fields touch each other so it looks far more intentional. I'm not super fussed which style we go for as long as we implement it to match.

[TanvirArjel]

@HaoK This is how bootstrap 5.x form floating looks like:

Links: https://getbootstrap.com/docs/5.2/forms/floating-labels/#example

Form floating in Identity Templates are broken as it is missing mb-3 in form-floating div and placeholder value in inputs.

[HaoK]

@blowdart okay with adding the placeholder values like so? The mb-3 change seems easy enough

[blowdart]

Sure :)