+ Start a Discussion
cstephenscstephens 

Remove default formatting for apex:inputText

Can someone please help me remove the default formatting (or reformat) the apex:inputText and other similar tags (apex:inputCheckbox, etc)?  I am attempting to format my page to look like the basic sales force format that you see with standard objects such as apex:inputField, but the spacing that apex:inputText is adding is causing major headaches for me.  Where is this formatting created, and how do I override it?

 

Thanks

sinsiterrulezsinsiterrulez

Can you please post your VF page code!!!

cstephenscstephens

I don't want to post too much of my code up, but let's look at this simple example

 

<apex:pageBlockSection title="My Title" rendered="{!NOT(ISNULL(campaignID))}">
         <apex:outputPanel rendered="{!NOT(ISNULL(MemberList))}" id="block">
             <nobr>Output for this section</nobr>
         </apex:outputPanel><br/>
         <apex:inputCheckbox value="{!includecontacts}" /> Include Contacts
         <apex:inputCheckbox value="{!includeleads}" /> Include Leads
</apex:pageBlockSection>

 

In this example the checkbox appears all the way to the left, and the labels for them appears half way across the page, leaving a gap of about 4 inches between the checkbox and its label.  Results are similar for apex:inputText

sinsiterrulezsinsiterrulez

You can use the dir attribute in apex:inputtext or apex:inputcheckbox with value as RTL or LTR to place it to left or right.

Let me know if this is what you wanted!!

johutchjohutch

It sounds like the pageBlockSection component is using the default column size of 2.

That would explain why the checkbox appears on the left and the text appears on the middle of the page. It is putting the checkboxes in the first column and the text in the second column.

 

if you wrap the checkbox and text in an outputPanel you might get the behavior you are looking for: (the output panel treats everything inside of it as one column)

 

Example:

 

<apex:outputpanel>
    <apex:inputCheckbox value="{!includecontacts}" /> Include Contacts
</apex:outputpanel>
<apex:outputpanel>
    <apex:inputCheckbox value="{!includeleads}" /> Include Leads
</apex:outputpanel>

 I hope that helps

 

cstephenscstephens

Thanks, the output panel thing helped....  The dir/ltr/rtl seemed to effect the text inside the text box not the text box itself, so that didn't do what I needed.  Are these formatting relationships documented somewhere?  I find the salesforce docs a bit lacking in many cases, and it's annoying that there is default formatting applied without it being detailed out somewhere - it also seems very contrary to modern web dev techniques... i.e. there should be a stylesheet which defines all of this....

 

The other area I'm having issue looks like this:

 

<table class="detailList" border="0" cellpadding="0" cellspacing="0">

<tr>

  <td class="labelCol requiredInput"><span  class="requiredMark">*</span><label for="fromtext"><nobr>My Label:</nobr></label></td>

  <td class="data2Col"><div class="requiredInput"><div class="requiredBlock"></div>&nbsp;</div></td>

  <apex:inputText id="fromtext" value="{!fromtext}" required="false" />

 </tr>

</table>

 

if I use a standard <input> field this looks great and formats to look just like a standard salesforce page, but won't connect with my controller, and using the apex:inputText adds space inside the table cells as if the cellpadding is effected.  Any help on that?  I want the red line "required input" cell to be butted directly against the inputText as it is in standard pages, but it has space to the right of it, and there is also space to the left of the inputText field.

 

thanks.