Clarity: [forms] Generic way to override column widths

[technbuzz]

Summary

I wish there was a way to configure on top level of how the column classes are decided for label and actual input element.
With the new forms we don't need to link label and input using for and id attributes respectively. I wish we could have some configs to make our life much easier.

Use case

Already using clr-input-container does so much for me. I should not be overriding and adding custom classes to label and as well as input element

Examples

config:{ defaultLabelColumns: 3, defaultFormContianerColumns: 9}

[gnomeontherun]

Thanks for the request, this was something I had in mind as a potential enhancement but wanted to hear if people requested it.

I don't have a specific API in mind yet, but I was thinking it would be similar to <form clrForm clrLayout="horizontal" clrLayoutColumns="3,9"> then it would set for the whole form. We don't have a global service to track this setting at the application level, so that would be a larger enhancement and I think this would be a good first step. Thoughts?

[dorthrithil]

I was just about to request the same, as horizontal forms in small modals don't look good (line breaks in labels because of not enough space, but 50% empty space on the right side). This feature will help to get around this problem.

[mojoLyon]

Hi.
Anymore information on this enhancement ?

[dorthrithil]

It's currently not assigned to any milestone and not mentioned in the work in progress file. So this will probably take some more time.

Here's a code snipped I use as a workaround. This would change the column widths in forms from 2 / 10 to 3 / 9 if you add the class override-col-widths-3-9 to your form tag.

form.override-col-widths-3-9 {

  .clr-row {

    .clr-col-md-2 {

      @media (min-width: 768px) {
        flex: 0 0 25%;
        max-width: 25%;
      }

    }

    .clr-col-md-10 {

      @media (min-width: 768px) {
        flex: 0 0 75%;
        max-width: 75%;
      }

    }

  }

}

[dorthrithil]

@gnomeontherun I think clrLayoutColumns="3,9" is fine. At least for the application I'm building I don't see the need for a global service. We have 50% forms in modals/wizards which need the overridden column widths and 50% "full width" forms which fare well with the default setting. So even with a global service I would have to override the column widths for the same number of forms as without.
The perfect solution however would be if the column widths are set based on the container width. So if my form is in a modal, clrLayoutColumns="3,9" is automatically applied.

[andreiconstantinbytex]

I would like to be assigned to this one, please.

[hippee-lee]

This should be closed because of the https://github.com/vmware/clarity/pull/3883 PR

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