1

I was googling to find a way to Make the help Icon text look nice, However I got an option of Inline Text option. apart from this Is there any option we have to make it pretty.

Here is my code :

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

And this is How the text looks in the form.

enter image description here

  • Looks alright to me. What did you want it to look like? – martin Aug 31 '16 at 14:30
  • @martin Each Capital words are the heading and it has its associated help text. I wand each Heading to be at the left corner one by one and the text on its own line. – Samuel Robert Aug 31 '16 at 14:33
1

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

The helpicon visualforce 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:

enter image description here

  • I tried the controller still the alignment is same. – Samuel Robert Sep 9 '16 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.