[SalesForce] Visualforce page inputfield label formatting

I am not sure how to avoid the line break in the label. For example on the field "Is this Overall Parent Company" , I am expecting the label to be in one line. I tried with style but no success.

    <apex:page id="ExecutiveSnapshotCalculation" standardController="Executive_Snapshot__c" extensions="ExecSnapshotCalculations"
           lightningStylesheets="{!$User.UIThemeDisplayed == 'Theme4d'}">
    <style type="text/css">
        .fieldClass {
            padding-top: 2px;
            padding-right: 10px;
            padding-bottom: 2px;
            padding-left: 2px;
            text-align: right;
            font-size: 91%;
            font-weight: bold;
        }
    </style>
    <apex:form id="ExecSS">
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Submit Request" action="{!doSave}"/>
                <apex:commandButton value="Cancel" action="{!back}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="companydata" columns="1" title="Company Data" collapsible="false">
                <apex:outputText value="{!$Label.ExecSS_Description}" style="float:right;font-weight:300" styleClass="label"/>
                <apex:pageBlockSection columns="2">
                    <apex:pageBlockSection id="companysectionleft" columns="1" >
                        <apex:inputField value="{!Executive_Snapshot__c.Company_Name__c}" required="true" id="Company_Name__c" />
                        <apex:inputField value="{!Executive_Snapshot__c.Overall_Parent_Company__c}" required="false" id="Overall_Parent_Company__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Total_Revenue__c}" required="false" id="Total_Revenue__c" />
                        <apex:inputField value="{!Executive_Snapshot__c.Total_Assets__c}" required="false" id="Total_Assets__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Market_Cap__c}" required="false" id="Market_Cap__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Number_of_Employees__c}" required="false" id="Number_of_Employees__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Ownership_Governance__c}" required="false" id="Ownership_Governance__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Sector_of_Operations__c}" required="false" id="Sector_of_Operations__c"/>
                        <apex:inputField value="{!Executive_Snapshot__c.Percent_of_Business__c}" required="false" id="Percent_of_Business__c"/>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection id="companysectionright" columns="1">
                        <apex:outputText value="If the company is not the overall Parent company, complete the following:" style="float:left;font-weight:600" styleClass="label"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Company_Name__c}" required="false" id="Parent_Company_Name__c" />
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Total_Revenue__c}" required="false" id="Parent_Total_Revenue__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Total_Assets__c}" required="false" id="Parent_Total_Assets__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Market_Cap__c}" required="false" id="Parent_Market_Cap__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Number_Of_Employees__c}" required="false" id="Parent_Number_Of_Employees__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Ownership__c}" required="false" id="Parent_Ownership__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Sector_of_Operations__c}" required="false" id="Parent_Sector_of_Operations__c"/>
                            <apex:inputField value="{!Executive_Snapshot__c.Parent_Percent_of_Business__c}" required="false" id="Parent_Percent_of_Business__c"/>
                    </apex:pageBlockSection>
                </apex:pageBlockSection>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Job/Position Data" collapsible="false">
                <apex:pageBlockSection id="jobsectionleft" columns="1">
                    <apex:outputText value="Please provide the following information on the role / position needed:" style="float:left;font-weight:600" styleClass="label"/>
                    <apex:inputField value="{!Executive_Snapshot__c.Client_Position_Title__c}" required="false" id="Client_Position_Title__c"/>
                    <apex:inputField value="{!Executive_Snapshot__c.Country__c}" required="false" id="Country__c"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection id="jobsectionright" columns="1">
                    <apex:inputField value="{!Executive_Snapshot__c.Reporting_Level__c}" required="false" id="Reporting_Level__c"/>
                    <apex:inputField value="{!Executive_Snapshot__c.Function__c}" required="false" id="Function__c"/>
                    <apex:inputField value="{!Executive_Snapshot__c.Job_Match__c}" required="false" id="Job_Match__c"/>
                </apex:pageBlockSection>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Best Answer

I was able to resolve this. After inspecting the code in the browser added the style to avoid the wrap.

<style type="text/css">
    .bPageBlock th.vfLabelColTextWrap {
      white-space: nowrap;   //added nowrap here
      position: relative;
    }
</style>

Related Solutions

[SalesForce] Formatting number values on Visualforce page

I don't think there is any built-in SF function that will achieve exactly what you want. But you might be able to get close by mixing in a bit of javascript. The below is something I have scratched out here and isnt complete but should go the right way.

I think you could use a combination of a hidden inputText field to hold the value and an output field for displaying. When the outputText is clicked on it is hidden by a js function and the inputText is shown. When the input text is changed a js function hides the input and an actionSupport fires to update the outputText display. The action support may need to also update the controller with the new value but I havent added that at the moment.

<apex:inputField value="{!Object.myNumber}" id="myNumberInput"onclick="hideInput('myNumber')">
    <apex:actionSupport event="onchange" reRender="myNumberDisplay"/>
</apex:inputField> 

<apex:outputText value="{0, number, ###,##0}" id="myNumberDisplay" onclick="showInput('myNumber')">
    <apex:param value="{!myNumber}"/>
</apex:outputText>

[SalesForce] VisualForce page not formatting correctly

The reason the page is rendering the way it is, is because of your markup and the tag you are using.

The apex:panelGrid tag creates an HTML table with elements within each row up to the specified number of items per row, in your case columns=2.

It appears that you've either got an extra nested panelGrid tag that you don't intend or you are attempting to use an incorrect tag for the task at hand.

As you can see in your simplified markup below, there are two columns... and the highSchoolPanel is contained within the first cell of the second row of the panelGrid, with nothing specified to be rendered in the second cell. A panelGrid child element (rendered as a td) cannot span multiple columns in its row.

<apex:outputPanel id="studType">
<apex:outputText styleclass="tableHeader" value="High School Information" rendered="{!studentType=='Freshman'}" />
<apex:outputText styleclass="tableHeader" value="" rendered="{!studentType=='Freshman'}" />

<!-- two column table specified -->
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!studentType=='Freshman'}">

   <!-- row 1 cell 1 -->
   <apex:panelGroup >
      <apex:outputText styleclass="label" value="Home Schooled"/>
   </apex:panelGroup>

   <!-- row 1 cell 2 -->
   <apex:inputField value="{!interest.Home_Schooled__c}" >
      <apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
   </apex:inputField>

   <!-- row 2 cell 1 -->
   <apex:outputPanel id="highSchoolPanel">

      <!-- nested table within the first cell in the second row -->
      <apex:panelGrid columns="2" rendered="{!interest.Home_Schooled__c==false}">
         <apex:panelGroup >
            <apex:outputText styleclass="label" value="High School Country"/>
         </apex:panelGroup>
         <apex:inputField value="{!interest.High_School_Country__c}">
            <apex:actionSupport event="onchange" rerender="highSchoolNamePanel"/>
         </apex:inputField>
         <apex:panelGroup >
            <apex:outputText styleclass="label" value="High School State/Province"/>
         </apex:panelGroup>
[snip]
      </apex:panelGrid>
   </apex:outputPanel>
</apex:panelGrid>

I would suggest moving the highSchoolPanel out of the panelGrid that contains it and add the rendered="{!studentType=='Freshman'}" to it so that it's visibility matches the other 'Freshman' items above it.

Best Answer

Related Solutions

[SalesForce] Formatting number values on Visualforce page

[SalesForce] VisualForce page not formatting correctly

Related Topic