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
sanju21sanju21 

How to get rid of Pageblock border in VF page?

I have developed a VF page and I am using standard styles for the apex form. I customized the page using my css styles

but no matter what I do, I am unable to get rid of the pageblock border (thin black border) that is appearing on the right side

and at the bottom of the page..any help is greately appreciated!!

Best Answer chosen by Admin (Salesforce Developers) 
JeeedeeeJeeedeee

One good thing I found out that in the new enhanced UI, these lines are disappeared. But since this is not used yet, I found out another solution. It took me quite some time, but now it's working ok. I am searching with Javascript to the classnames in my VF page, and adding additional CSS styles to these classes. These are overwriting the normal ones, and making marges smaller, given that fact the background colors(the lines) are not displayed anymore...

 

And these are gone :) :) So give it a try, make sure your classnames are correctly, e.g. use firebug to detect the correct classnames. Now hoping that Salesforce is not going to rename these classnames, because in that fact the lines are back.

 

 

<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="AddressExtension" >
<script language="javascript" type="text/javascript">
    function removeBorders() {
        var classElementsbPageBlock = getElementsByClass('bPageBlock bDetailBlock secondaryPalette', null, null);
        if (classElementsbPageBlock.length > 0) {
            for (var k = 0; k < classElementsbPageBlock.length ; k++) {
                var element = classElementsbPageBlock[k];
                element.className = element.className + ' bPageBlockwithoutlines';
            }
        } 
        var classElementspbBody = getElementsByClass('pbBody', null, null);
        if (classElementspbBody .length > 0) {
            for (var l = 0; l < classElementspbBody.length ; l++) {
                var element = classElementspbBody[l];
                element.className = element.className + ' pbBodyNoMarginRight';
            }
        } 
        var classElementspbFooter = getElementsByClass('pbFooter secondaryPalette', null, null);
        if (classElementspbFooter.length > 0) {
            for (var m = 0; m < classElementspbFooter.length ; m++) {
                var element = classElementspbFooter[m];
                element.className = element.className + ' pbFooterNoImage';
            }
        } 
    }


    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }

    var previousOnload = window.onload;        
    window.onload = function() { 
        if (previousOnload) { 
            previousOnload();
        }
    removeBorders();

    }
</script>

<style type="text/css">
.bPageBlockwithoutlines {
    border-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

.bPageBlock .pbBodyNoMarginRight {
    margin-right:0;
}

.bPageBlock .pbFooterNoImage {
    height:0px;
    width:0px;
}

</style>

<-- add here your apex code for your form, pageblock etcetera -->

</apex:page>

 

 

 

 

All Answers

ahab1372ahab1372

can you just remove the pageBlock tags?

JeeedeeeJeeedeee

A bit old post, but I now have the same problem, and I wonder if and how you have solved this problem?

 

I use tags like apex:pageblockSection, apex:outputField and apex:inputtext to render different values and also the correct labels. For this reason I would like to have the code in an apex:pageblock, but since it's an inline VF page, I don't want to see those ugly lines.. Here a part of my code, any help would be welcome.

 

 

<apex:pageBlock mode="detail">
	<apex:pageblockSection id="search" columns="1" rendered="{!editModus}">
		<apex:pageBlockSectionItem >
			<apex:outputLabel value="Postal code"></apex:outputLabel>
			<apex:inputText value="{!postalCode}"></apex:inputText>
		</apex:pageBlockSectionItem>
		<apex:pageBlockSectionItem >
			<apex:outputLabel value="Housenumber"></apex:outputLabel>
			<apex:inputText value="{!houseNumber}"></apex:inputText>
		</apex:pageBlockSectionItem>
		<apex:outputField value="{!Account.State}"/>
		<apex:pageBlockSectionItem >
			<apex:commandButton value="Validate address" action="{!findAddress}"/>
		</apex:pageBlockSectionItem>
		<apex:pageBlockSectionItem />
	</apex:pageblockSection> 
 .....
</apex:pageBlock>

 

 

 

 

 

 

sanju21sanju21

I could not fix that ever...but still would appreciate a solution!

Jason_42Jason_42

Try setting your pageBlock mode="maindetail".

 

JeeedeeeJeeedeee

If you read the manual, you should think that that should do the trick... But unfortunately not :( At least not for my INLINE vf page

JeeedeeeJeeedeee

One good thing I found out that in the new enhanced UI, these lines are disappeared. But since this is not used yet, I found out another solution. It took me quite some time, but now it's working ok. I am searching with Javascript to the classnames in my VF page, and adding additional CSS styles to these classes. These are overwriting the normal ones, and making marges smaller, given that fact the background colors(the lines) are not displayed anymore...

 

And these are gone :) :) So give it a try, make sure your classnames are correctly, e.g. use firebug to detect the correct classnames. Now hoping that Salesforce is not going to rename these classnames, because in that fact the lines are back.

 

 

<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="AddressExtension" >
<script language="javascript" type="text/javascript">
    function removeBorders() {
        var classElementsbPageBlock = getElementsByClass('bPageBlock bDetailBlock secondaryPalette', null, null);
        if (classElementsbPageBlock.length > 0) {
            for (var k = 0; k < classElementsbPageBlock.length ; k++) {
                var element = classElementsbPageBlock[k];
                element.className = element.className + ' bPageBlockwithoutlines';
            }
        } 
        var classElementspbBody = getElementsByClass('pbBody', null, null);
        if (classElementspbBody .length > 0) {
            for (var l = 0; l < classElementspbBody.length ; l++) {
                var element = classElementspbBody[l];
                element.className = element.className + ' pbBodyNoMarginRight';
            }
        } 
        var classElementspbFooter = getElementsByClass('pbFooter secondaryPalette', null, null);
        if (classElementspbFooter.length > 0) {
            for (var m = 0; m < classElementspbFooter.length ; m++) {
                var element = classElementspbFooter[m];
                element.className = element.className + ' pbFooterNoImage';
            }
        } 
    }


    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }

    var previousOnload = window.onload;        
    window.onload = function() { 
        if (previousOnload) { 
            previousOnload();
        }
    removeBorders();

    }
</script>

<style type="text/css">
.bPageBlockwithoutlines {
    border-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

.bPageBlock .pbBodyNoMarginRight {
    margin-right:0;
}

.bPageBlock .pbFooterNoImage {
    height:0px;
    width:0px;
}

</style>

<-- add here your apex code for your form, pageblock etcetera -->

</apex:page>

 

 

 

 

This was selected as the best answer
Matt Weisberg 3Matt Weisberg 3
You don't need JS for this:

Set the body pageblock borders to 0 in CSS
 
<apex:pageblock id="rows">  <style>

            body .bPageBlock { 
            		border-width:0;
            		
            .pbBody .blue .pbSubheader{
            		

                  .pageDescription .pageType {

                   color: #F3F6F9;
            
              

                   }

</style>
...