1

I'm trying to format a visualforce page so that it can render correctly in a dashboard element. It's just an rss feed, but the column width is too great. I'd like to limit it's width so that it is completely viewable from the dashboard component.

Here is the VF source:

<apex:page showHeader="false" controller="gAlertCntrl">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!result}" var="alert" columnsWidth="50%">
            <apex:column>
                <b><apex:outputText value="{!alert.Title__c}" escape="false" /></b>
                <br />
                <apex:outputText value="{!alert.Content__c}" escape="false"/>
                <br />
                <em><apex:outputText value="{!alert.Published__c}"/></em>
                <br />
                <a href="{!alert.link__c}" target='_blank'>{!alert.link__c}</a>
                <hr />
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock> 
</apex:page>

I've tried using 'columnsWidth':

<apex:pageBlockTable value="{!result}" var="alert" columnsWidth="50%">

I've tried width:

<apex:pageBlockTable value="{!result}" var="alert" width="50%">

I've also tried both of those values in px instead of %.

I've tried putting the width into the column element:

<apex:column width="50px">

My table still spans beyond the edge of the screen. How can I constrain the width to fit inside a "wide" sized dashboard component?

Thanks all!

Zac

8
  • columnsWidth is correct as per the documentation. Have you inspected the HTML source to see what is actually being emitted to the client?
    – BarCotter
    Mar 11, 2015 at 16:11
  • .bPageBlock .list { width: 100%; } -- although toggling that doesn't seem to make much of a difference. I can't find a width any where else in the tree.
    – ZAR
    Mar 11, 2015 at 16:13
  • I've sometimes resorted to putting a div around the pageblock and setting the width in the div's style attribute. Sometimes feel that some standard Salesforce styling doesn't behave like we expect it to... Mar 11, 2015 at 16:17
  • The apex:pageBlockTable tag should be outputted as <table> in the HTML. As @RichardDurrant suggests, the width may be coming from the PageBlock tag.
    – BarCotter
    Mar 11, 2015 at 16:19
  • Right, the output is a table, and that's where the .bPageBlock .list { width: 100%; } is coming from. Why is it 100% when I elected 50? I don't know. Even when I edit it in chrome inspector, no changes... @RichardDurrant, I'm going to try that idea of wrapping a div around it.
    – ZAR
    Mar 11, 2015 at 16:21

1 Answer 1

1

The link seemed to be the issue.

Instead of displaying this:

<a href="{!alert.link__c}" target='_blank'>{!alert.link__c}</a>

I just made the whole post an anchor:

<apex:page showHeader="false" controller="gAlertCntrl">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!result}" var="alert" columnsWidth="50%">
            <apex:column>
             <a href="{!alert.link_c}" target="_blank">
                <b><apex:outputText value="{!alert.Title__c}" escape="false" /></b>
                <br />
                <apex:outputText value="{!alert.Content__c}" escape="false"/>
                <br />
                <em><apex:outputText value="{!alert.Published__c}"/></em>
                <br />
                <hr />
              </a>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock> 
</apex:page>

This works perfectly

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .