Clarity: New from layout Date / select / text input design bugs

[speti43]

Describe the bug

New from layout Date / select / text input design bugs

How to reproduce

https://stackblitz.com/edit/clr-date-form-issue

Steps to reproduce the behavior:

1. Go to stackblitz
2. See the input fields, they are not below each others, date container uses different spacing then the others.

I've tried to use <clr-date-container>, but it was worse.

The first cause is related to the angular <clr-input-container> bug, which places the clr-col-8 to the wrong container, but the spacing of date container is a different issue.

Expected behavior

All inputs and labels are in place, no different spacing, it worked in the previous version well.
The native html with clr-control-container, clr-input-wrapper works fine,
<clr-input-container>, <clr-select-container>, <clr-date-container> components should be fixed.
Please provide a documentation, how to use datepicker with new containers.

Versions

App

• Angular CLI: 6.1.3
• Node: 8.11.2
• Clarity: 0.13
• Device:
• 
  
  
  
  • Type: Dell latitude E5550
  
  
• OS: Windows 10 64bit
• Browser: Chrome - Version: 69.0.3497.92 (Official Build) (64-bit)

[gnomeontherun]

It is not recommended to use CSS and Angular form controls at the same time, but it should work. I'll investigate the layout a little more closely.

However, the date component is not yet updated, so it has some different display issues as you see. This should be resolved by #2631 when its merged.

[speti43]

@gnomeontherun I won't use, if the <clr-date-container> will do the job and I can use <clr-input-container> with the first one which has no reactive binding (it's not working with the value binding now).

[gnomeontherun]

The issue here should be resolved in a PR I'm about to make, which the main issue I found still was the datepicker wasn't handling grid overrides properly.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.