0

I am trying to diplay two input fields - Phone and Phone extension in a single line in a visualforce page. Next to Phone, i want a help icon, which shows some text on hover. Problem i have is that the icon falls into next line. Can someone give a good way to resolve this? Here is the code being used -

<apex:pageBlockSection columns="2" title="{!$Label.ht_contact_information}">  
     <apex:pageBlockSectionItem id="ContactPhoneSectionItem">

         <apex:outputLabel value="{!$Label.ht_phone}" for="ContactPhone" />
         <apex:outputPanel >
           <apex:inputField id="contactPhone" value="{!htCase.SuppliedPhone}"  styleClass="htCaseInputElement" required="true"/>
           <apex:image value="{!$Resource.HelpIcon}" title="{!$Label.ht_phone_format_help}"/>
         </apex:outputPanel>
       </apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem id="ContactPhoneExtensionSectionItem">
           <apex:outputLabel value="{!$Label.ht_phone}" for="contactPhoneExtension" />
             <apex:inputField id="contactPhoneExtension" value="{!htCase.Extension__c}"  styleClass="htCaseInputElement" required="true"/>
        /apex:pageBlockSectionItem>
      </apex:pageBlockSection>

And here is the outcome enter image description here

Not sure whats up with the formatting. Its removing first few lines of the code, where i have a pageblock section with 2 columns. Then i have started a pageblockSectionItem for the first phone field. You can see the rest of the code after that.

The help icon should be right next to where first Phone inputfield ends. Any guidance is appreciated.

Improve this question
1
  • Initially i thought its because of width of the inputfield. But seems like thats not the case. Even if i keep it single column, remove the phone extension item, it still falls onto next line.
    – user2957592
    Dec 23, 2014 at 17:16

2 Answers 2

Reset to default
1

Seems like bug in SFDC. If you remove required=true, it is working fine. If it is the case, you need to use styles and class level validations. :(

Cheers!
Shailesh

Improve this answer
3
  • Thanks. You are right. If i remove required=true, its fine
    – user2957592
    Dec 23, 2014 at 17:27
  • It's not a "bug", exactly; the required bar actually wraps the input element inside another element that presents the red bar. This element behaves as a block element, which causes it to appear in its own line on the block. This is arguably incorrect, as it should remain an inline-block, but that's where we are today. You could probably write a specific enough CSS rule to override the display mode of the required box, but I didn't take the time to do that the last time I had this exact problem.
    – sfdcfox
    Dec 23, 2014 at 17:41
  • You are correct. @user2957592: You can wrap inputfield and image in different divs and assign CSS to them. Like this: <apex:outputPanel><br> <div style="display:inline-block"> <apex:inputField id="contactPhone" value="{!Contact.phone}" required="true" /></div> <div style="display:inline-block"><img src="/img/alohaSkin/help_grey.png" /> </div> </apex:outputPanel>
    – Shailesh Patil
    Dec 23, 2014 at 17:53
0

At First I thought its because of width of the column. But even if i reduce it to just 1 column, and remove the second column of phone extension, the help icon still falls into next line.

Here's the code, had to remove the starting < for formatting to work here

apex:pageBlockSection columns="1" title="{!$Label.ht_contact_information}">
apex:pageBlockSectionItem id="ContactPhoneSectionItem">

                                                      <apex:outputLabel value="{!$Label.ht_phone}" for="ContactPhone" />
                                                      <apex:outputPanel >
                                                      <apex:inputField id="contactPhone" value="{!htCase.SuppliedPhone}"  styleClass="htCaseInputElement" required="true"/>
                                                      <apex:image value="{!$Resource.HelpIcon}" title="{!$Label.ht_phone_format_help}"/>
                                                      </apex:outputPanel>
                                              </apex:pageBlockSectionItem>

                                            </apex:pageBlockSection>

And here's the result,

enter image description here

I want that help icon to be inline with the phone inputfield

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .