+ Start a Discussion

Text field compressing double "white spaces"

I have a text field on a visualforce page, and when someone types in two white spaces - as in: "test  white"- upon saving it automatically corrects it to one white space - as in: "test white". The issue is we DON'T want this to happen. Does anyone know if this is typical behavior for a text field, or maybe it's part of our settings? I didn't set up the visualforce page, so I'm not very familiar with it. I believe this is the code for the section that I'm having this issue with though. If anyone could let me know if they could see what is causing this issue, that would be great. Thank you!


    <apex:pageBlockSection title="{!IF(pageMode == 'new', 'Step 2. Specify ', '')}Matching Pattern" columns="1" rendered="{!pageMode != 'view'}">
        <apex:pageBlockSectionItem >
            <apex:outputPanel >
                <table id="filters" class="declarativeFilterTable">
                        <th scope="col">&nbsp;</th>
                        <th scope="col">Type</th>
                        <th scope="col">Attribute</th>
                        <th scope="col">Value</th>
                    <apex:variable value="{!1}" var="index" />
                    <apex:repeat value="{!matchingPatternRules}" var="rule">
                        <tr style="{!IF(index > 5 && (ISBLANK(rule.Type__c) || LEN(rule.Type__c) < 1) && (ISBLANK(rule.Attribute__c) || LEN(rule.Attribute__c) < 1) && (ISBLANK(rule.Value__c) || LEN(rule.Value__c) < 1), 'display: none;', '')}" class="filterRow">
                            <td><span class="textBox hide">{!FLOOR(index)}.</span></td>
                            <td><apex:inputField value="{!rule.Type__c}"/></td>
                            <td><apex:inputField value="{!rule.Attribute__c}"/></td>
                            <td><apex:inputText value="{!rule.Value__c}" size="80"/></td>
                                <apex:outputPanel layout="none" rendered="{!index < 5}">
                                    <span id="and{!FLOOR(index)}" class="textBox">AND</span>
                        <apex:variable var="index" value="{!index + 1}" />
Best Answer chosen by Admin (Salesforce Developers) 

Don't worry about it. We all started where you are right now at some point!


This will be directly in your Visualforce code, such as the following:


<apex:outputText value="{!record.field}" style="white-space: pre"/>


All Answers


This is an inherent limitation in HTML itself. It happens because whitespace is "insigificant" in HTML by default. In other words, when a page is rendered as this:


<td>Hello        World</td>

HTML will convert the additional spaces to a single space when displayed:

Hello World


If this is happening on a page where you have control, you can add the following attribute to your element:


style="white-space: pre"

This instructs CSS-compliant browsers (virtually every modern browser) to treat the white-space within that element as "significant", meaning every space will be rendered as you expect.


The Standard UI will still collapse spaces.


Thank you so much for the help! Please excuse my ignorance (I'm still very new to visualforce), but is this something I would add to the controller or the visualforce page itself?


Don't worry about it. We all started where you are right now at some point!


This will be directly in your Visualforce code, such as the following:


<apex:outputText value="{!record.field}" style="white-space: pre"/>


This was selected as the best answer

Thanks again for your help! Unfortunately, I may have jumped the gun in assuming that I could do this and it would be fixed :) I just went in and added it to the visualforce code, and Im not seeing a difference. Does it look like I added it to the code incorrectly?


<apex:outputField value="{!target.Watch_this_target__c}"style="white-space: pre"/>


 When I view the page in edit mode it has the extra whitespaces, but not in view mode.


That should work. Let me look into it and see.




 I have a customer who deliberately has spaces in their names. They want the standard SFDC UI to respect that in the detail page and other places. I don't see any SFDC setting to do this. Is there a way of inserting white-space:pre somewhere so that it applies globally to all SFDC pages?





I presume that you mean, compressing spaces in fields. It is possible coerce salesforce.com into showing the extra spaces on all detail pages, but no guarantees for Visualforce pages, reports (unless you export the report), and third-party integrations, etc.


There are two hacks for this. The first is browser dependent. It is known as a user style sheet. Mozilla Firefox, for example, allows a user to create syle sheets that apply to a domain name, and will always be present. The second style method is configuration dependent, and relies on the sidebar to piggyback in custom CSS.


To achieve the first form, simply create the correct CSS file, placing the following code in it:

.dataCol div { white-space: pre }

You should restrict it to salesforce.com sites, to be safe.


The second form takes more effort:


1) Setup > Customize > User Interface. Enable Custom Sidebar Components for All Pages.

2) Setup > Customize > Home > Home Page Components > New > HTML Area > Narrow (left)... switch to "View HTML" mode, enter code:


<style>.dataCol div { white-space: pre }</style>

3) Setup > Customize > Home > Home Page Layouts > Create or modify layout to use new component.

4) Assign layouts from Step 3 to profiles that should use it (probably all).


At this point, any time the sidebar is available with its custom components, names should probably appear correctly (you might need to tweak other areas, too, like the page's section header). I don't believe this hack works in Console or Service Console, nor will it work in reports. Regardless, it will at least provide the standard UI a way to render those extra spaces. As a side note, it may have an undesirable effect on multi-line text fields, so you have been warned (you could CSS those out of harm's way, if you'd like; my goal here was more illustrative).


thanks a bunch!


The first method presumably relies on asking an end user to point to a custom user style sheet that I provide to them - that won't be practical. Plus it is browser dependent.


The second method works!


I had explored the second method earlier today, but forgot to make the User Interface -> Show custom side bar change.

The problem with second approach is that it show the custom side bar component with the name. So I named it "Keep White Spaces" and you see it. I changed the name to a single character dot ".", but you still see it.


So I just added .htmlAreaComponentModule {display:none} and now I don't see it.