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
Ashwin GadiyarAshwin Gadiyar 

How can I move my field left in Visualforce?

I want to move my field to the left in visualforce. The code is as follows:

        <apex:pageblockSection columns="1" >
                    <apex:outputField value="{!Opportunity.Why_do_anything__c}" style="float:left,width:100% important;" />
</apex:pageblockSection>

I've tried putting style="float:left" without any success. I've heard it can't be controlled when in a pageblockSection though.User-added image
Best Answer chosen by Ashwin Gadiyar
SarvaniSarvani
Hello Ashwin,

Try the code below: 
<style>
body .bPageBlock .pbBody .labelCol{
     float:left;
}
</style>

<apex:pageblock>
  <apex:pageblockSection columns="1" >
     <apex:outputField value="{!Account.name}" />
  </apex:pageblockSection>
</apex:pageblock>

Hope this helps ! Mark as solved if it did.

Thanks,
Sarvani

All Answers

Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Ashwin,

Use Padding-right property to move your field to left of the screen or page. Add sufficient value.Below is an example snippet you can follow to fix your field.
  
<apex:outputField value="{!Opportunity.Why_do_anything__c}" style="padding-right: 50px;;" />

Mark this as best answer if it solves your issue.Others can benefit too.

Hope this helps!

Regards,
Santosh.
Ashwin GadiyarAshwin Gadiyar
Hi Santosh,

Thanks for your answer. My only issue with this is that using px can cause it to look differently on different sized screens etc?
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Ashwin, 

instead of px; you can simply use % example padding-right:20%. This will solve your issue.

 
SarvaniSarvani
Hello Ashwin,

Try the code below: 
<style>
body .bPageBlock .pbBody .labelCol{
     float:left;
}
</style>

<apex:pageblock>
  <apex:pageblockSection columns="1" >
     <apex:outputField value="{!Account.name}" />
  </apex:pageblockSection>
</apex:pageblock>

Hope this helps ! Mark as solved if it did.

Thanks,
Sarvani
This was selected as the best answer
Ashwin GadiyarAshwin Gadiyar
@Santosh, it didn't work sorry

@Sarvani, thank you - it did work. However there is more code on the page that has 2-column blocks as below, which it has also changed:

            <apex:pageBlockSection title="Company Information" columns="2">
                <apex:outputField value="{!Opportunity.Employees__c}" />
                <apex:outputField value="{!Opportunity.Buying_Location__c}" />
                <apex:outputField value="{!Opportunity.Industry__c}" />
                <apex:outputfield value="{!Opportunity.Renewal_Date__c}"/>
                <apex:outputfield value="{!Opportunity.Website__c}"/>
                <apex:outputField value="{!Opportunity.Turnover__c}"/>
            </apex:pageBlockSection>
Ashwin GadiyarAshwin Gadiyar
Hi guys,

Is there a way that the code provided by Sarvani only is to affect the one column sections? I would like the pageBlockSection that has 2 columns to not be aligned left