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