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
Katherine AndersonKatherine Anderson 

Help with outputField label text wrap

Hi all,

I'm trying to get the spacing/label text wrap on this page sorted so that the labels associated with outputField values don't wrap. The idea is to have outputField in the left column and the associated inputField value directly across in the right column. Right now, I've got the right column displaying correctly but haven't been able to do the same for the left. VF page & image below.  Any advice would be much appreciated!



<br>label{<br>                color: #30a27c;<br>                font-size: 12px;<br>                font-style: normal;<br>                font-weight: normal;<br>                font-family: PT Sans, sans-serif;<br>                text-align: justify;<br>                white-space: nowrap;<br>                }<br>


         
            
           
           
           
           
           
           
           
           
           
           
         
         
           
           
           
           
           
           
           
           
           
           
           
           
                 
       



User-added image

Thanks,
-Katherine
Best Answer chosen by Katherine Anderson
SarfarajSarfaraj
Change the nested pageblock section. For each pageblock section it automatically generates one table and associated columns. Use something like this, 
<apex:pageblock title="Milestones Report">
	<apex:pageBlockSection title="Financial Milestones" columns="2">
		<apex:outputField value="{!form.New_Funders__c}" rendered="{!form.New_Funders__c != null}"/>
		<apex:inputField value="{!form.New_Funders_Actual__c}" rendered="{!form.New_Funders__c != null}" style="width:50px" taborderhint="2" label="Number of New Institutional Grant Makers"/>
		<apex:outputField value="{!form.Cash_Reserves_Months__c}" rendered="{!form.Cash_Reserves_Months__c != null}"/>
		<apex:inputField value="{!form.Cash_Reserves_Months_Actual__c}" rendered="{!form.Cash_Reserves_Months__c != null}" style="width:50px" taborderhint="2" label="Cash Reserves in Bank (# of Months)"/>
		<apex:outputField value="{!form.FY15_Total_Funds_Raised_USD__c}" rendered="{!form.FY15_Total_Funds_Raised_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_Total_Funds_Raised_USD_Actual__c}" rendered="{!form.FY15_Total_Funds_Raised_USD__c != null}" taborderhint="2" label="FY15: Total Funds Raised (USD)"/>
		<apex:outputField value="{!form.FY15_In_Country_Fundraising_USD__c}" rendered="{!form.FY15_In_Country_Fundraising_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_In_Country_Fundraising_Actual__c}" rendered="{!form.FY15_In_Country_Fundraising_USD__c != null}" taborderhint="2" label="FY15: In-Country Fundraising (USD)"/>
		<apex:outputField value="{!form.FY15_Earned_Income_USD__c}" rendered="{!form.FY15_Earned_Income_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_Earned_Income_USD_Actual__c}" rendered="{!form.FY15_Earned_Income_USD__c != null}" taborderhint="2" label="FY15: Earned Income (USD)"/>
		<apex:outputField value="{!form.FY16_Total_Funds_Raised_USD__c}" rendered="{!form.FY16_Total_Funds_Raised_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_Total_Funds_Raised_USD_Actual__c}" rendered="{!form.FY16_Total_Funds_Raised_USD__c != null}" taborderhint="2" label="FY16: Total Funds Raised (USD)"/>
		<apex:outputField value="{!form.FY16_In_Country_Fundraising_USD__c}" rendered="{!form.FY16_In_Country_Fundraising_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_In_Country_Fundraising_Actual__c}" rendered="{!form.FY16_In_Country_Fundraising_USD__c != null}" taborderhint="2" label="FY16: In-Country Fundraising (USD)" />
		<apex:outputField value="{!form.FY16_Earned_Income_USD__c}" rendered="{!form.FY16_Earned_Income_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_Earned_Income_USD_Actual__c}" rendered="{!form.FY16_Earned_Income_USD__c != null}" taborderhint="2" label="FY16: Earned Income (USD)"/>
		<apex:outputField value="{!form.Total_Funds_Raised__c}" rendered="{!form.Total_Funds_Raised__c != null}" label="FY17: Total Funds Raised (USD) - Target"/>
		<apex:inputField value="{!form.Total_Funds_Raised_Actual__c}" rendered="{!form.Total_Funds_Raised__c != null}" taborderhint="2" label="FY17: Total Funds Raised (USD)" />
		<apex:outputField value="{!form.In_Country_Fundraising__c}" rendered="{!form.In_Country_Fundraising__c != null}" label="FY17: In-Country Fundraising (USD) - Target"/>
		<apex:inputField value="{!form.In_Country_Fundraising_Actual__c}" rendered="{!form.In_Country_Fundraising__c != null}" taborderhint="2" label="FY17: In-Country Fundraising (USD)"/>
		<apex:outputField value="{!form.Earned_Income_USD__c}" rendered="{!form.Earned_Income_USD__c != null}" label="FY17: Earned Income (USD) - Target"/>
		<apex:inputField value="{!form.Earned_Income_USD_Actual__c}" rendered="{!form.Earned_Income_USD__c != null}" taborderhint="2" label="FY17: Earned Income (USD)"/>
		<apex:inputField value="{!form.Financial_Milestones_Narrative__c}" rendered="{!form.Financial_Narrative__c = true}" style="width:400px" taborderhint="2" />
	</apex:pageBlockSection>
    </apex:pageBlock>

 

All Answers

SarfarajSarfaraj
Hi Katherine,

Can you please post your code for the VF page. It would be easier for me to explain on top of it.

--Akram
Katherine AndersonKatherine Anderson
Hi Akram ... this is a bit embarrassing - first time posting & everytime I try to use the add a code sample button it looks like it's going to post the whole sample but then only shows the first few lines. Is there something I'm missing?
SarfarajSarfaraj
Seems to me something is wrong. No code is visible. Can you please check and repost the code again?
Katherine AndersonKatherine Anderson



                label{
                color: #30a27c;
                font-size: 12px;
                font-style: normal;
                font-weight: normal;
                font-family: PT Sans, sans-serif;
                text-align: justify;
                white-space: nowrap;
                }
Katherine AndersonKatherine Anderson
Sorry ... what I'm trying to post should look like this:
User-added image
Not sure why it's truncating the sample when I use the code snippet button.
SarfarajSarfaraj
Can you please copy the code and paste it inside the body of the post, instead of code snippet block?
Katherine AndersonKatherine Anderson
That's what I tried in my original post ... trying again ....



   
    
         
           
           
           
           
           
           
           
           
           
           
           
         
         
           
           
           
           
           
           
           
           
           
           
           
           
                  
       
   
    
     
    
   
    
      
            
         
            
         


      
             Page 1/2
        
   
        
   


 
Katherine AndersonKatherine Anderson
No idea what I'm doing wrong here. Last ditch attempt to get something across: https://docs.google.com/document/d/1KEsXt1dN_bNpbN07ImBb20xGSMoK9pYRS7lDn8sAQfo/edit?usp=sharing
SarfarajSarfaraj
Katherine,

Thanks, I can see it now :)

Use the following CSS. I haven't tested it. But it should work.
  

	th, label{
		color: #30a27c;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        font-family: PT Sans, sans-serif;
        text-align: justify;
        white-space: nowrap;
	}

--Akram
Katherine AndersonKatherine Anderson
Hmm ... so close!
th, label{} doesn't work, but both td, label{} and tr, label[] do ... however using either of them means that the page then gets really wide. Do you know how I'd go about getting rid of all that blank space between the 2 columns? (It seems to have added a similar amount of space on the far right side of the right-hand column. Almost like there are now 4 columns, with data displaying in columns 1 & 3.)

User-added image
-Katherine
SarfarajSarfaraj
Change the nested pageblock section. For each pageblock section it automatically generates one table and associated columns. Use something like this, 
<apex:pageblock title="Milestones Report">
	<apex:pageBlockSection title="Financial Milestones" columns="2">
		<apex:outputField value="{!form.New_Funders__c}" rendered="{!form.New_Funders__c != null}"/>
		<apex:inputField value="{!form.New_Funders_Actual__c}" rendered="{!form.New_Funders__c != null}" style="width:50px" taborderhint="2" label="Number of New Institutional Grant Makers"/>
		<apex:outputField value="{!form.Cash_Reserves_Months__c}" rendered="{!form.Cash_Reserves_Months__c != null}"/>
		<apex:inputField value="{!form.Cash_Reserves_Months_Actual__c}" rendered="{!form.Cash_Reserves_Months__c != null}" style="width:50px" taborderhint="2" label="Cash Reserves in Bank (# of Months)"/>
		<apex:outputField value="{!form.FY15_Total_Funds_Raised_USD__c}" rendered="{!form.FY15_Total_Funds_Raised_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_Total_Funds_Raised_USD_Actual__c}" rendered="{!form.FY15_Total_Funds_Raised_USD__c != null}" taborderhint="2" label="FY15: Total Funds Raised (USD)"/>
		<apex:outputField value="{!form.FY15_In_Country_Fundraising_USD__c}" rendered="{!form.FY15_In_Country_Fundraising_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_In_Country_Fundraising_Actual__c}" rendered="{!form.FY15_In_Country_Fundraising_USD__c != null}" taborderhint="2" label="FY15: In-Country Fundraising (USD)"/>
		<apex:outputField value="{!form.FY15_Earned_Income_USD__c}" rendered="{!form.FY15_Earned_Income_USD__c != null}"/>
		<apex:inputField value="{!form.FY15_Earned_Income_USD_Actual__c}" rendered="{!form.FY15_Earned_Income_USD__c != null}" taborderhint="2" label="FY15: Earned Income (USD)"/>
		<apex:outputField value="{!form.FY16_Total_Funds_Raised_USD__c}" rendered="{!form.FY16_Total_Funds_Raised_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_Total_Funds_Raised_USD_Actual__c}" rendered="{!form.FY16_Total_Funds_Raised_USD__c != null}" taborderhint="2" label="FY16: Total Funds Raised (USD)"/>
		<apex:outputField value="{!form.FY16_In_Country_Fundraising_USD__c}" rendered="{!form.FY16_In_Country_Fundraising_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_In_Country_Fundraising_Actual__c}" rendered="{!form.FY16_In_Country_Fundraising_USD__c != null}" taborderhint="2" label="FY16: In-Country Fundraising (USD)" />
		<apex:outputField value="{!form.FY16_Earned_Income_USD__c}" rendered="{!form.FY16_Earned_Income_USD__c != null}"/>
		<apex:inputField value="{!form.FY16_Earned_Income_USD_Actual__c}" rendered="{!form.FY16_Earned_Income_USD__c != null}" taborderhint="2" label="FY16: Earned Income (USD)"/>
		<apex:outputField value="{!form.Total_Funds_Raised__c}" rendered="{!form.Total_Funds_Raised__c != null}" label="FY17: Total Funds Raised (USD) - Target"/>
		<apex:inputField value="{!form.Total_Funds_Raised_Actual__c}" rendered="{!form.Total_Funds_Raised__c != null}" taborderhint="2" label="FY17: Total Funds Raised (USD)" />
		<apex:outputField value="{!form.In_Country_Fundraising__c}" rendered="{!form.In_Country_Fundraising__c != null}" label="FY17: In-Country Fundraising (USD) - Target"/>
		<apex:inputField value="{!form.In_Country_Fundraising_Actual__c}" rendered="{!form.In_Country_Fundraising__c != null}" taborderhint="2" label="FY17: In-Country Fundraising (USD)"/>
		<apex:outputField value="{!form.Earned_Income_USD__c}" rendered="{!form.Earned_Income_USD__c != null}" label="FY17: Earned Income (USD) - Target"/>
		<apex:inputField value="{!form.Earned_Income_USD_Actual__c}" rendered="{!form.Earned_Income_USD__c != null}" taborderhint="2" label="FY17: Earned Income (USD)"/>
		<apex:inputField value="{!form.Financial_Milestones_Narrative__c}" rendered="{!form.Financial_Narrative__c = true}" style="width:400px" taborderhint="2" />
	</apex:pageBlockSection>
    </apex:pageBlock>

 
This was selected as the best answer
SarfarajSarfaraj
Regarding the problem that you were having in posting the code, here is the solution,
https://developer.salesforce.com/forums/#!/feedtype=SINGLE_QUESTION_DETAIL&dc=General_Development&criteria=OPENQUESTIONS&id=906F0000000BNcpIAG
Katherine AndersonKatherine Anderson
Brilliant! Thanks for your help on both counts, Akram! Removing the nested pageBlockSections did the trick.