0

enter image description here

The above picture contains my VF component. I would like to remove the gap between "Conversion Page Destination URL" & the two input fields (picklist , text area) so that they are in the same line adjacent to each other.

Can someone help me how to put those three in the same line ?

Code :

<apex:attribute assignTo="{!oCase}" description="case reference" name="ocCase" required="true" type="case"/>
<apex:attribute description="View mode" name="EditFlag" required="true" type="String" />

<apex:pageBlockSection columns="1" collapsible="false" rendered="{!if(EditFlag=='true',true,false)}" id="NewSearchAOS">
    <apex:pageBlockSection columns="1" id="SearchAOS1" collapsible="false">
         <apex:inputField id="GoalType" style="height:19px; width:100px;" value="{!ocCase.Goal_Type__c}" />
         <apex:pageBlockSection  columns="1" id="SearchAOS1_1" collapsible="false">
             <apex:pageBlockSection columns="3" id="SearchAOS1_1_1" collapsible="false">
                 <apex:outputLabel value="Conversion Page Destination URL" />
                 <apex:inputField label=" " id="ConversionPageDestinationURL"  style="height:19px; width:100px;" value="{!ocCase.Conversion_Page_Destination_URL__c}" />
                 <apex:inputTextArea label=" " id="DotSetupScenarion"  style="height:19px; width:100px;" value="{!ocCase.ConversionPageOptions__c}" />
             </apex:pageBlockSection>
         </apex:pageBlockSection>

         <apex:inputTextArea rows="20" id="DotSetupScenarion"  styleclass="myClass" style="height:19px; width:200px;" value="{!ocCase.Dot_Setup_Scenarion__c}" />
    </apex:pageBlockSection> 
    <apex:pageBlockSection title="Conversion Period (Enter a conversion period of upto 90 days)" columns="1" id="SearchAOS1s" collapsible="false">

         <apex:inputField id="ConversionDay" style="height:19px; width:50px;" value="{!ocCase.Conversion_Day__c}" />
         <apex:inputField id="ConversionHour"  style="height:19px; width:50px;" value="{!ocCase.Conversion_Hour__c}" />
         <apex:inputField id="ConversionMin"  style="height:19px; width:50px;" value="{!ocCase.Conversion_Min__c}" />

    </apex:pageBlockSection>
</apex:pageBlockSection> 

  • Did you try to add the float: left style on your two inputs ? – SF_user Dec 2 '14 at 10:07
  • What about setting the width of the html inputs to 100%? Makes also better use of the real estate (screen space) – Uwe Heim Dec 2 '14 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.