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
ccMarkccMark 

How to change the outputpanel width and center the contents of the pageblock?

I have a VF page with a number of questions in the outputLabel and they are wrapping.  Also, my page is heavily weighted to the left and I'd like to find a way to center up the content.  Is there a way to control the width of the output labels and also to get better centering on the page?

 

                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Have you been engaged with this client before?" for="q2"/> 
                    <apex:outputPanel>
                        <apex:selectList id="q2" value="{!q2}" size="1">
                            <apex:selectOption itemValue="yes" itemLabel="Yes"/>
                            <apex:selectOption itemValue="no" itemLabel="No"/>
                        </apex:selectList>
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>

TIA, Mark

Best Answer chosen by Admin (Salesforce Developers) 
Edwin VijayEdwin Vijay

You can use the style attribute to specify width and centering, though this does not work in all cases...

 

Example

 

 

<apex:outputLabel style="font-weight:bold;" value="Contact E-mail" >

        <div style="position:relative;left:75px;">
             <apex:commandButton value="Search" action="{!contactsearch}" />
        </div>
 
 
 


All Answers
Edwin VijayEdwin Vijay
You can use the style attribute to specify width and centering, though this does not work in all cases...
 
Example
 
 
<apex:outputLabel style="font-weight:bold;" value="Contact E-mail" >

        <div style="position:relative;left:75px;">
             <apex:commandButton value="Search" action="{!contactsearch}" />
        </div>
 
 
 
This was selected as the best answer
stephanstephan
You can also prevent wrapping of text in the label using css like so:
 
 
<apex:outputLabel value="Have you been engaged with this client before?" for="q2" style="white-space:nowrap;"/>  

 
 
 


bmabma
If you want to specify the width of an outputPanel, you need to set the layout attribute to "block". By default, outputPanel renders as <span> tag, which would ignore the width CSS attribute. 
 
 
Below is an example of outputPanel from the Visualforce Dev Guide. 
 
 
Span Example

<!-- Spans do not add any additional formatting to the body of the outputPanel.  --> 
    
<apex:outputPanel id="thePanel">My span</apex:outputPanel>

The example above renders the following HTML:

<span id="thePanel">My span</span>

Div Example

<!-- Divs place the body of the outputPanel within the equivalent of an HTML paragraph tag.  --> 
    
<apex:outputPanel id="thePanel" layout="block">My div</apex:outputPanel>

The example above renders the following HTML:

<div id="thePanel">My div</div>