function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Esther Thomas 2Esther Thomas 2 

visualforce alignment outputlabel

Hi Everyone
 I'm trying to get all my labels aligned in the the following VF page. I've tried various things without luck. Any suggestions on how to get the labels left justified? Also I'd like my picklists on the same row as the label as well. Can I use a table format in a VF page? I'm not sure what the best approach here is. Thanks.

User-added image
 
<apex:page standardController="Booking__c" extensions="testing10" docType="html-5.0">
    <apex:form >
    	<apex:pageBlock >
        	<apex:pageBlockSection >
                <apex:pageBlockSectionItem >
                <apex:outputLabel>Booking Date</apex:outputLabel>
                <apex:inputfield value="{!Records.Start_Date_Time__c}">
                <apex:actionSupport action="{!UpdateSitter}" event="onchange" reRender="D1"/>   
           		</apex:inputfield>
			    </apex:pageBlockSectionItem>                 
            </apex:pageBlockSection>
            
            <apex:pageBlockSection columns="1" id="D1">
               
                 <apex:outputLabel rendered="{!FlagH}">Baby Sitters</apex:outputLabel>
                 <apex:selectList value="{!SelectedSitter}" size="1" rendered="{!FlagH}"> <!--var holding selected item-->
                 <apex:selectOptions value="{!RecordOption}" rendered="{!FlagH}"/> 
                    </apex:selectList>
              
                  <apex:outputLabel rendered="{!FlagH}">Clients</apex:outputLabel>
                  <apex:selectList value="{!SelectedClient}" size="1" rendered="{!FlagH}"> <!--var holding selected item-->
                  <apex:selectOptions value="{!ClientOption}" rendered="{!FlagH}"/> 
                  </apex:selectList>
                 
                <apex:outputLabel rendered="{!FlagH}" >Hours Needed</apex:outputLabel>
                <apex:input type="number" value="{!BookHours}" html-min="2" html-max="10" style="width:40px;" rendered="{!FlagH}"/>
                
              </apex:pageBlockSection>
              <apex:pageBlockButtons location="bottom">
	          <apex:commandButton action="{!save}" value="Save"/>
	          </apex:pageBlockButtons>
            

        </apex:pageBlock>
    </apex:form>
</apex:page>

 
NagendraNagendra (Salesforce Developers) 
Hi Thomas,

Sorry for this issue you are encountering.

May I suggest you please check with below link from the forums community with a similar discussion and a suggested workaround. Please let us know if this helps.

Thanks,
Nagendra
shakti singh 23shakti singh 23
Hi Thomas,

You can use 'Label' attribute of <apex:selectList> tag.
Example:  <apex:selectList  label="Baby Sitters"  value="{!SelectedSitter}" size="1" rendered="{!FlagH}">

Thanks,
Shakti