Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

Is there an easy way to replicate a pageBlockSection header with the show/hide behavior while avoiding the Visualforce automatic formatting inside the pageBlockSection?

When I insert some divs and forms inside the pageBlockSection they get stuck inside a table, which I don't want. I just want the header and the show/hide folding. I can't use it with all the inner tables. At the moment, I'm just doing it all custom - copying some of the styles and using jQuery for the effects.

share|improve this question
    
Can you clarify a bit further on what your goal is? You mention that your divs and forms 'get stuck' inside a table. What is the effect of this in respect to what you are wanting to achieve? Visualforce emits HTML mainly using HTML tables to render the components, so its hard to get away from that if your using the standard components. That said, I am curious as to what impact it is having on you. –  Andrew Fawcett Jan 22 '13 at 21:58
    
thanks, yes, I understand how it works, I'm just looking for a workaround. I want a heading that looks like a pageBlockSection header with a functioning code-folding arrow icon and I want clicking the arrow to hide/show the content I put inside the section. I don't want any automatic formatting (HTML or otherwise) happening to the content inside the pageBlockSection. I wanted to see if there was an easier workaround than doing it all custom. The impact is that I have a few divs and forms inside the section that are getting put in different TDs, which I don't want. –  paul Jan 22 '13 at 22:03
    
I see. Have you tried wrapping them in a <div>? –  Andrew Fawcett Jan 22 '13 at 22:07

3 Answers 3

up vote 6 down vote accepted

If columns="1" is explicitly specified and a single outputPanel child is declared, Visualforce won't split the display into data and label columns.

<apex:page>
    <apex:pageBlock mode="maindetail">
        <apex:pageBlockSection collapsible="true" title="apex:pageBlockSection" columns="1">
            <apex:pageBlockSectionItem>
                <apex:outputPanel layout="none">
                    exactly one child
                </apex:outputPanel>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

(Setting mode="maindetail" on the pageBlock also suppresses the borders and background, which gets you closer to a clean slate. However Visualforce uses tables as a horizontal layout mechanism so the innermost td is there to stay!)

page block section

share|improve this answer
1  
tip: use dataStyle on the pageBlockSectionItem to override the leftover cell padding on the td –  bigassforce Jan 22 '13 at 23:59
1  
Good answer. Also, thanks for the tip on the mode - maindetail works, but it includes the gray border lines, which I don't want. So I'm going to try to figure out if there's a way to turn those off. I don't want to use pageSectionItems, because I have several divs in the section, in the same place, that I'm showing/hiding with UI controls. –  paul Jan 23 '13 at 23:58
    
Oh wow, I thought apex:pageBlockSection and apex:pageBlockSectionItem were implicit, kinda like tbody. TIL they're not; now I don't need to feel guilty about not using them - thanks paul! –  bigassforce Jan 24 '13 at 0:51
    
Cool, glad I could return the favor. Also, I was able to remove the lines using jquery - I added id's to the elements inside the pageBlockSection, then used $("#myID").parent().css('border',0) to remove the lines. I probably could have done it with some long CSS rules, but this was easier. –  paul Jan 24 '13 at 5:46

In the following example Visualforce automatically wraps the contents of the apex:pageblocksection in a single td element container. Is this what you are seeing? Or perhaps it is the standard Salesforce CSS that is impacting the rendering?

<apex:page>
    <apex:pageblock>
        <apex:pageblocksection collapsible="true" title="Section">
            <div style="background: red">My Div</div>
            <form id="myform"><input name="someinput" /></form>
        </apex:pageblocksection>
    </apex:pageblock>
</apex:page>

enter image description here

NOTE: As per my comments on your answer, if you want access this you can either provide your own id's on the HTML you put within or wrap in your own div container and give that an id.

Hope this helps somewhat! :)

share|improve this answer
    
This is exactly as I'd do it, except I'd suggest setting the pageBlockSection to columns="1". Best practice would also suggest that you use <apex:outputPanel layout="block"> instead of a raw html <div> tag. But otherwise, spot on. –  Peter Jan 22 '13 at 22:49

add dataStyle="border:0px" labelStyle="border:0px" in pageBlockSectionItem .

you can get red of border in pageblock.

thanks, Shikher

share|improve this answer
    
That won't remove the table markup, just remove the styling. –  LaceySnr Apr 17 at 2:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.