5

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.

3
  • 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. Jan 22, 2013 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, 2013 at 22:03
  • I see. Have you tried wrapping them in a <div>? Jan 22, 2013 at 22:07

3 Answers 3

7

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

4
  • 1
    tip: use dataStyle on the pageBlockSectionItem to override the leftover cell padding on the td Jan 22, 2013 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, 2013 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! Jan 24, 2013 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, 2013 at 5:46
3

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! :)

1
  • 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.
    – pchittum
    Jan 22, 2013 at 22:49
-1

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

you can get red of border in pageblock.

thanks, Shikher

1
  • That won't remove the table markup, just remove the styling.
    – Matt Lacey
    Apr 17, 2014 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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