2

I have a basic pageblock->pageblocksection->pageblocksectionitem->(label, selectcheckboxes) setup in my VF page.

When I render the page, <apex:selectCheckboxes> I get html with each input wrapped inside it's own td element in a single tr and if I change the attribute layout="pagedirection" I get each element with it's own tr

Is there a CSS trick someone knows that can get apex:selectcheckboxes not to overflow the page layout, and wrap uniformly?

overflowing selectcheckboxes

Full disclosure, Bootstrap's CSS has been added to the page, but shouldn't affect these elements as they have no extra classes on them!

<apex:pageBlock>
<apex:pageBlockSection>
    <apex:pageBlockSectionItem>
         <apex:outputlabel value="{!$Label.TradNominee_FavoriteAcademicSubjects} " />
         <apex:outputPanel>
              <div class="requiredInput">
                    <div class="requiredBlock"></div>
                        <apex:selectCheckboxes value="{!favoriteAcademicSubjects}">
                        <apex:selectOptions value="{!favoriteAcademicSubjectsOptions}" />
                        </apex:selectCheckboxes>
                    </div>
          </apex:outputPanel>
   </apex:pageBlockSectionItem>
...
1

Overflow has four options: visible | hidden | scroll | auto | inherit with the default being visible. When hidden is chosen, the block content that exceeds the block size or in your case, cell size is "clipped". With auto, scroll bars will appear to allow the content that exceeds the size of the block/cell to be viewed. You'd want to apply this to the table that's a child of the div or to the div itself. Am uncertain since you're also using bootstrap. Perhaps you add it to bootstrap??

You mention wrapping uniformly, do you want these to wrap inside their cells? If so, you'd need to utilize the white-space property. I'm confident you've seen no-wrap specified in tables before, but rarely is wrap seen since it's a non-standard attribute. From the CSS 2.1 documentation on the white-space property: "the effect of an HTML PRE element with the non-standard "wrap" attribute is demonstrated by the following example"

pre[wrap]  { white-space: pre-wrap }

With Pre-wrap, user agents are prevented from collapsing sequences of white space but lines are broken at preserved newline characters and as necessary to fill line boxes. Using the above example, you should be able to do something similar with a td along the lines of:

td[wrap] { white-space: pre-wrap }

However, you may want to declare it using something like this

div.requiredInput > td[wrap] { white-space: pre-wrap } 
//td that's a child of div having a class of requiredInput

to specify exactly how you want the contents of the td to display. Note: the above may need to be declared as td-wrap inside the curly braces to get it to wrap in the way you want it to and may not work at all since it's non-standard. I've also not tried it, but it has been mentioned in the documentation.

Another alternative means of handling this I'm aware of would be to use the display property on that div to specify it as an inline table, table columns or even as lists. I'm not entirely certain if any of those would produce the results you desire, but they may be worth exploring if the others don't pan out for you.

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.