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
CosCCosC 

Need to remove horizontal line between label & input field in visualforce page

I am building Case Creation visualforce page for mobile version. I need label & input filed one after other instead of in the same row. I am able to achieve it uisng below code. But I see horizontal line between label & input field which i need to remove it. Is it possible to remove horizontal line between label & input field

Current VF Page Image:

_______________________________
Reason: (Label)
_______________________________
Performance Issue (Input field)
_______________________________


I need it to be :

_______________________________
Reason: (Label)

Performance Issue (Input field)
_______________________________


VF code snippet:

 <apex:pageBlock title="Case">
    <apex:pageBlockSection columns="1" title="Editing">        
        <apex:outputLabel value="Reason" for="id"/>              
        <apex:outputPanel layout="none" >
         <apex:inputField value="{!Case.Reason}" id="id" />  
        </apex:outputPanel>        
        <apex:commandButton value="Save" action="{!save}"/>
    </apex:pageBlockSection> 
  </apex:pageBlock>
Best Answer chosen by CosC
KaranrajKaranraj
Hi - Keep the output lable and input field inside the your outpanel

<apex:pageBlock title="Case">
    <apex:pageBlockSection columns="1" title="Editing">        
        <apex:outputPanel layout="none" >
        <apex:outputLabel value="Reason" for="id"/> <br/>              
         <apex:inputField value="{!Case.Reason}" id="id" />  
        </apex:outputPanel>        
        <apex:commandButton value="Save" action="{!save}"/>
    </apex:pageBlockSection> 
  </apex:pageBlock>

All Answers

KaranrajKaranraj
Hi - Keep the output lable and input field inside the your outpanel

<apex:pageBlock title="Case">
    <apex:pageBlockSection columns="1" title="Editing">        
        <apex:outputPanel layout="none" >
        <apex:outputLabel value="Reason" for="id"/> <br/>              
         <apex:inputField value="{!Case.Reason}" id="id" />  
        </apex:outputPanel>        
        <apex:commandButton value="Save" action="{!save}"/>
    </apex:pageBlockSection> 
  </apex:pageBlock>

This was selected as the best answer
CosCCosC
Thanks! It works.