Horizontal form layout with longer labels are wrapped in multi lines

[speti43]

Describe the bug

Horizontal form layout with longer labels are wrapped in multi lines, and in smaller view the inputs will be placed in the next line, however there is enough space to place in the same line.

How to reproduce

https://stackblitz.com/edit/clr-form-layout-horizontal-issue?file=src/app/app.component.html

Steps to reproduce the behavior:

1. Go to the link
2. The form is only horizontal when you expand the view, if you make it smaller then itt won't be horizontal, however it could be (inconsistent usege of col-2 on labels)

Expected behavior

Use more space, stay horizontal if there is enough space for the label and input. Remove col-sm-2 constraints.

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]

This is by design actually, if you have a lot of text it should wrap like this. You can override it to have a different default width if you would like. The challenge is you need to have the same column widths for the horizontal layout to be consistent, or else it is jagged.

We need to add a section for this on the documentation, but here is how you can set the defaults yourself. Be sure to apply the same classes to the label and inputs for the whole form, since this override works at the individual control level.

<clr-input-container>
  <label class="clr-col-3">Field 1 label long name</label>
  <input clrInput type="text" name="example" [(ngModel)]="selectValue" class="clr-col-9" />
</clr-input-container>

I'm going to leave this open for us to get the documentation updated to show this case.

[speti43]

Hi @gnomeontherun, I've applied you suggestion on my validated select component, and further problems came up: https://stackblitz.com/edit/clr-select-issuevalidation?file=src%2Fapp%2Fapp.component.html Please check the link. What I see and I think is a bug:

1. The form still does not use all the available spaces (half of the page is empty and it shrinks the input into a 10px width.

2. The select style is broken (underline missing from the right end / dropdown icon is outside the select container, and it's not clickable)

3. Click on the select input, do not chose anything, click elsewhere: the red exclamation mark overlaps the dropdown icon.

[speti43]

If you inspect the page on stackblitz, this is the bug (picture above). Here is the component which probably has the bug: https://github.com/vmware/clarity/blob/master/src/clr-angular/forms/input/input-container.ts controlClass method is the source of the problem probably.

[gnomeontherun]

Thanks, I'll check into it again.

[gnomeontherun]

The bug here is that the clr-col-# classes are not being removed from the select itself (internally they should be moved to other elements that are being internally managed by the control).

The size of the select is determined by the browser based on the width it needs to display the options. The layout issues you see come from it retaining the clr-col-# class, so I believe fixing that would resolve all of these issues.

[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.