Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sfdc learner007sfdc learner007 

lightning:helptText alignment issue with lightning:input field in lightning componnet

User-added image

i want display lightning:helpText along with lable of lighting:input field. 
<aura:component>
    <lightning:helptext content="Your Name will be your login name" />
	<lightning:input label="Name" name="myname" required="true"/>
</aura:component>



Thanks in advance
Best Answer chosen by sfdc learner007
sfdcMonkey.comsfdcMonkey.com
Hi here is workaround :
add custom label for input field and hide standard component lable using CSS 
<aura:component>
    <label class="slds-form-element__label" for="text-input-id-1">
      <abbr class="slds-required" title="required">*</abbr> 
        Name
    </label>
    <lightning:helptext content="Your Name will be your login name" />
	<lightning:input class="hideLabel" label="Name" name="myname" required="true"/>
</aura:component>
  
.THIS.hideLabel label{
    display:none;
}
User-added image

Hope it will helps you,
http://sfdcMonkey.com

 

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi here is workaround :
add custom label for input field and hide standard component lable using CSS 
<aura:component>
    <label class="slds-form-element__label" for="text-input-id-1">
      <abbr class="slds-required" title="required">*</abbr> 
        Name
    </label>
    <lightning:helptext content="Your Name will be your login name" />
	<lightning:input class="hideLabel" label="Name" name="myname" required="true"/>
</aura:component>
  
.THIS.hideLabel label{
    display:none;
}
User-added image

Hope it will helps you,
http://sfdcMonkey.com

 
This was selected as the best answer
sfdcMonkey.comsfdcMonkey.com
************ check out following post for more better workaround *************************
User-added image

http://​​​​​​​http://sfdcmonkey.com/2018/10/20/display-help-text-lightninginput-field-component/ (http://http://sfdcmonkey.com/2018/10/20/display-help-text-lightninginput-field-component/)

Thanks hope this will helps you 
Atul Singh 87Atul Singh 87
Hi @Piyush, what if we want the helper text after the input field ? 
ots khanots khan
https://pakistanrailway.pk/sania-express-online-booking-fares-ticket-price-schedule-terminals/