function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SamuelRobertSamuelRobert 

How to align the text inside the Visual Force help Text inside the keyword <c:helpicon helptext=""

Hi,

please find the code below here we have invoked a help text for a custom field in Orders, I tried using the keyword <c:helpicon to show the test hwever in the page it shows the text arranged in a improper way.
  
<apex:outputPanel rendered="{!order.Type=='Mobile Clock'}">
                    <apex:actionRegion >
                        <table style="width:50%;">
                            <tr>
                                <td style="text-align:right;width:35%;font-weight:bold;font-size:11px;color:#4a4a56;padding-right: 2px;">
                                   
                                    <c:helpicon helpText="NOT REQUIRED:The Employee can punch in and out anywhere and the app does not track where the punch took place.
                                                          
                                    GEO-LOCATION REQUIRED:Allows punches from anywhere.Requires location services to be enabled on the employees cell phone.The app will record where the punch took place.
                                                          
                                    GEO-FENCE WARNING:A geo fence is set around a location.IF any employee punches outside this location a warning will appear.The employee has the option to continue to punch in or they can choose not to punch in.
                                                          
                                    GEO-FENCE REQUIRED:Employee is required to be within the geo fence location in order to punch into or out using the application"/>
                                        
                                    Clock Location Restrictions
                           
                                </td>
                                <td style="padding-left: 10px;">
                                    <apex:outputLabel value="." styleClass="required"></apex:outputLabel>
                                    <apex:inputField value="{!order.Clock_Location_Restriction__c}">
                                        <apex:actionSupport event="onchange" reRender="clockinformation" oncomplete="this.focus();" status="ocstatus"/>
                                    </apex:inputField>
                                </td>
                            </tr>
                        </table>
                    </apex:actionRegion>
                </apex:outputPanel>

Please find the screenshot for this view.
User-added image
Iam looking for a solution how to make this helptext look good and Nice.
NagendraNagendra (Salesforce Developers) 
Hi Sridhar,

I believe you will need to make changes similar to the following:

The help icon visual force component: 
<apex:component>
    <!-- Change the component attribute from just taking a string to have it accept a list of strings -->
    <apex:attribute name="helpText" type="String[]" description="The help text"/>
    <!-- Then loop through that list and add a <br> after each line -->
    <apex:repeat value="{!helpText}" var="ht">
    {!ht} <br/>
    </apex:repeat>
</apex:component>
The visualforce page controller: 
public  class MyController {
    /* Set up the strings as a list in the page controller */
    public list<String> getHelpText(){return new list<String>{
      'NOT REQUIRED:The Employee can punch in and out anywhere and the app does not track where the punch took place.',
      'GEO-LOCATION REQUIRED:Allows punches from anywhere.Requires location services to be enabled on the employees cell phone.The app will record where the punch took place.',
      'GEO-FENCE WARNING:A geo fence is set around a location.IF any employee punches outside this location a warning will appear.The employee has the option to continue to punch in or they can choose not to punch in.',
      'GEO-FENCE REQUIRED:Employee is required to be within the geo fence location in order to punch into or out using the application.'
    };}
}
The visualforce page: 
<apex:page controller="MyController">
    <!-- have the helpicon component get it's helpText value from that variable in the controller -->
    <c:helpicon helpText="{!HelpText}" />
</apex:page>
I'll admit my version here doesn't look very nice and proper, but it does have the line breaks at least. The formatting you already have in your component shouldn't need to be changed and it will look better than this:

User-added image

Here each Capital words are the headings and it has its associated help text. Here headings are  at the left corner one by one and the text on its own line.

Please mark this as best answer if it's solved.

Best Regards,
Nagendra.P