0

I am converting to slds to bootstrap in Lightning component. I am trying to display error message in bootstrap. It's working, but it displays very small font size. I did inspect element that time I got new class name ".form-element__help" for that error message. I just modified that font size. It displays message in bold format, but in my component that class isn't available? why?

I searched this class throughout my component. Isn't Avialbale? I just copied that class and apply the style in my css its working fine. How to find that class?

<div class="slds-form-element__control">
        <ui:inputText required="{!v.IsRequired}" aura:id="CompId" disabled="{!v.IsDisabled || v.IsReadOnly}" class="slds-input" placeholder="{!v.PlaceholderText}" change="{!c.handleOnChange}" value="{!v.Value}"/>
    </div>

Where is this class ".form-element__help"?enter image description here

Improve this question
1
  • That is added dynamically by salesforce whenever you make the UI component required. if you look at your screenshot it says 'Please enter a valid phone number'. Its added dynamically when a valid phone number is not entered. Its part of Lightning design system CSS. you can still override it in your component css as you have done.
    – RedDevil
    Jun 4, 2017 at 7:04

1 Answer 1

Reset to default
1

Check out the below link in LDS website. it has the information

https://www.lightningdesignsystem.com/components/form-element/

bout Form Element

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class="slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Improve this answer
3
  • Okay..how can i convert slds to bootstrap..it isnt easy approach...How can I do it any suggestion ???
    – user45058
    Jun 4, 2017 at 8:18
  • you cannot do a like for like conversion from SLDS to bootstrap. bootstrap has its own grid system. rather look at the bootstrap documentation and use the components as you wish. I cant think of any tool which is readily available which can do this. Bootstrap documentation is pretty good so going through it should give you the jump start you need.
    – RedDevil
    Jun 4, 2017 at 8:19
  • Already I designed slds..I want to convert it into boot strap.Iam facing problem so...
    – user45058
    Jun 4, 2017 at 8:20

You must log in to answer this question.