Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error message for field with slds-form-element_1-col class should be aligned with input #769

Open
mhankus opened this issue Aug 8, 2024 · 0 comments

Comments

@mhankus
Copy link

mhankus commented Aug 8, 2024

(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the
reduced test case.

error-label

Describe the issue. Is it a bug or a feature request (new component, new icon, new CSS class)?

When slds-form-element_1-col class is used on form element to change its size, it only impacts input. Error which is placed in tag with class slds-form-element__help preserves original position, making look inconsistent

Is this issue related to a specific component, variant, and/or state? If so, please detail which.

Are any specific browsers impacted by this bug?

Which version of the Salesforce Lightning Design System are you using?

What steps and/or code are needed to reproduce this issue?

<div class="slds-form__item" role="listitem">
  <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col slds-has-error">
    <label class="slds-form-element__label" for="horizontal-form-element-id-14">Description</label>
    <div class="slds-form-element__control">
      <textarea id="horizontal-form-element-id-14" placeholder="Placeholder text…" class="slds-textarea">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
      </textarea>
    </div>
    <div class="slds-form-element__help" id="horizontal-form-element-error-id-01">Complete this field</div>
  </div>
</div>

What did you expect to happen?

Margin for element with slds-form-element__help class should be reduced, so that error will be aligned with input.

What actually happened?

Error is displayed in the middle of input as shown in screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant