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
Javier MaldonadoJavier Maldonado 

Vertical Alignment - two fields same row

Hello everyone...

I'm trying to align in to the same row, two input fields contained in the same block, is this possible or am I wasting my time trying to achieve this point.

I've been tried using style= (margin, padding, position, etc...)... any idea???

User-added image

My Code 
<apex:pageBlockSection columns="1" id="Fabric_Tape" >
          <apex:pageBlockSectionItem id="STD_Width"  rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
          <apex:outputLabel value="Length (Yards)" style="position:absolute; margin-top: -9pt; margin-left: -60pt; "  />
                   <apex:selectList size="1" value="{!Customer_s_Price_List__c.Long_Imperial__c}" style="margin-top: -9pt; margin-left: 0pt; margin-right: -10pt;" rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
                        <apex:selectOptions value="{!length_FT_Imp}" />
                   </apex:selectList>
</apex:pageBlockSectionItem>

 
Best Answer chosen by Javier Maldonado
Javier MaldonadoJavier Maldonado
I didn't find any other way to resolve this issue more that rerender the Visualforce page with an Apex Controller, even when all the time I was trying to avoid accomplish this, using more deep code, so solution below, and it';s pretty easy, because is using selectOption method: 
VF Page:
<apex:selectList value="{!Customer_s_Price_List__c.Length_Units__c}" size="1" style="margin-top: -8pt;" >
<apex:selectOptions value="{!length_Units}"/>
</apex:selectList>


Apex Controller:
public List<SelectOption> getlength_Units(){
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('Yards','Yards'));
options.add(new SelectOption('Feet','Feet'));
return options;
}
Now it's working smooth...

Thanks for your help...
 

All Answers

ClintLeeClintLee
Try wrapping your label and both input fields in an apex:outputPanel and set it to 3 columns.

Like this: 
<apex:pageBlockSection columns="1" id="Fabric_Tape" >
    <apex:pageBlockSectionItem id="STD_Width" rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
        <apex:outputPanel columns="3">
            <apex:outputLabel value="Length (Yards)" />
            <apex:selectList size="1" value="{!Customer_s_Price_List__c.Long_Imperial__c}" 
                                       rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
                <apex:selectOptions value="{!length_FT_Imp}" />
            </apex:selectList>
         </apex:outputPanel>
</apex:pageBlockSectionItem>

Hope that helps,

Clint
Javier MaldonadoJavier Maldonado
Hi Clint,

Thanks for your advice... unfortunately "columns" is not an attribute of component "apex:outputpanel"... 

Thanks,
ClintLeeClintLee
Sorry, use apex:panelgrid. Not apex:outputpanel.
Javier MaldonadoJavier Maldonado
Hi Clint,

Thanks again, but it didn't work... It's still unaligned, and even when try to apply "style" attribute, it doesn't even move anywhere...User-added image
Thanks...
ClintLeeClintLee
One more suggestion.

Try wrapping only the input fields in the panel grid and set the columns attribute to "2". 

Like this:
  
<apex:pageBlockSection columns="1" id="Fabric_Tape" >
    <apex:pageBlockSectionItem id="STD_Width" rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
    <apex:outputLabel value="Length (Yards)" />        
    <apex:panelGrid columns="2">
        <apex:selectList size="1" value="{!Customer_s_Price_List__c.Long_Imperial__c}" rendered="{!IF(Customer_s_Price_List__c.Wide_Imperial__c<>TEXT(ProductMaxWidth),true,false)}">
            <apex:selectOptions value="{!length_FT_Imp}" />
        </apex:selectList>
     </apex:panelGrid>
</apex:pageBlockSectionItem>

 
Javier MaldonadoJavier Maldonado
HI Clint,

Thanks once again... I wrapped individually each "inputfield", once at the time, and nothing happened... I can move the second "inputfield", but not the first one... I've done almost everything that I know, but looks like it's sticked in that place... If you have any other idea, it'll be welcome...

Thanks again,
Javier
ClintLeeClintLee
Instead of wrapping each inputField individually did you wrap them both in the same panelGrid?

Like this:
  
<apex:pageBlockSectionItem>
    <apex:outputLabel value="Length" />
    
    <apex:panelGrid columns="2">
       <apex:selectList>
           <apex:selectOptions />
       </apex:selectList>

       <apex:inputField />
    </apex:panelGrid>

</apex:pageBlockSectionItem>

 
Javier MaldonadoJavier Maldonado
I didn't find any other way to resolve this issue more that rerender the Visualforce page with an Apex Controller, even when all the time I was trying to avoid accomplish this, using more deep code, so solution below, and it';s pretty easy, because is using selectOption method: 
VF Page:
<apex:selectList value="{!Customer_s_Price_List__c.Length_Units__c}" size="1" style="margin-top: -8pt;" >
<apex:selectOptions value="{!length_Units}"/>
</apex:selectList>


Apex Controller:
public List<SelectOption> getlength_Units(){
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('Yards','Yards'));
options.add(new SelectOption('Feet','Feet'));
return options;
}
Now it's working smooth...

Thanks for your help...
 
This was selected as the best answer