[SalesForce] How to size a VisualForce component to use the available width within containing pageBlock

I'm a little bit stuck getting a custom VisualForce component sized.

I've tried setting the width every way I can think of, but have seen no change. Here is the page code and component code.

I don't think the controllers are relevant.

The general idea is for the page to display the appropriate number of the component which allows the user to select from a number of drop downs and enter some input, and I would like each row of the pageBlock table to take up all available width.

<apex:page controller="xController">

<apex:form id="xForm">

    <apex:pageBlock id="objSelectBlock" title="example title">
        <apex:selectList value="{!objName}" required="true" size="1">
            <apex:selectOptions value="{!objectSelect}"/>
            <apex:actionSupport event="onchange" reRender="xBlock" action="{!changeFilterObject}"/>
        </apex:selectList>
    </apex:pageBlock> 

    <apex:pageBlock title="the {!objLabel} block..." id="xBlock">
        <apex:repeat value="{!filter.criteria}" var="block" id="theRepeat">
            <c:vfCriteriaBlock block="{!block}" id="theValue"/>
        </apex:repeat>
    </apex:pageBlock>
</apex:form>

And the component:

<apex:component selfclosing="true" html-width="100%">

<apex:attribute name="block" description="This is the block"

    type="CriteriaBlock" required="true"/>

<apex:pageBlockSection id="blockInfo" html-width="100%">

    <apex:pageBlockTable id="rulesTable" columns="4" value="{!block.criteria}" var="row" width="100%">

    <apex:column width="10%"><img border="0" class="icon deleteIcon" src="{!$Resource.delete_icon}" alt="HTML tutorial" width="15" height="15"></img>
    </apex:column>
    <apex:column headerValue="Field" width="30%">
        <apex:selectList value="{!row.xfield}" size="1">
            <apex:selectOptions value="{!row.FieldList}"/>
            <apex:actionSupport event="onchange" reRender="ops" />
        </apex:selectList>
    </apex:column>
    <apex:column headerValue="Relation" width="30%">
    <apex:selectList id="ops" value="{!row.operator}" size="1">
        <apex:selectOptions value="{!row.OperandTypes}"/>
    </apex:selectList>
    </apex:column>
    <apex:column headerValue="Filter Value" width="30%">
        <apex:inputText value="{!row.filterValue}" /> 
    </apex:column>


  </apex:pageBlockTable>
</apex:pageBlockSection>

Here's what the xBlock looks like:
xBlock screenshot
As you can see, it does not take up the full width.

Best Answer

You are wrapping the table in a <apex:pageblocksection>

Either set

columns="1"

like this

<apex:pageBlockSection id="blockInfo" html-width="100%" columns="1">

or change the <apex:pageblocksection> to a <apex:pageblock>

Related Solutions

[SalesForce] Can we use a custom Visualforce component twice on the same Visualforce page

Because i don't realy understand your actual problem without any code provided i can only guess. But here are some general minds to this topic.

It works fine until the component don't have "static" elements like css styles or javascript functions whith remain the same (visualforce objects like output panels get unique ids).

For example we have the following component "MyComponent":

<apex:component>
    <apex:attribute name="customColor" type="String" required="false"/>

    <style>
        .myStyle { color:{!customColor}; }
    </style>

    <apex:outputText styleClass="myStyle" value="Please click here" />
</apex:component>

Now we will insert this component twice at our page and give two different values for the "customColor". First one we want to get red color, for the second one - green:

<apex:page>
    Text 1: <c:MyComponent customColor="red" /> <br/>
    Text 2: <c:MyComponent customColor="green" />
</apex:page>

The result looks like this:

enter image description here

This is because the same css style was rendered twice at the main page and the second one won, that is overrides the first style. The same thing happens with javascript functions.

To work around this problem just insert an unique id attribute to the component and provide each static object with this parameter. Our component will look then like this:

<apex:component>
    <apex:attribute name="id" description="The unique id" type="String" required="true"/>
    <apex:attribute name="customColor" description="" type="String" required="false"/>

    <style>
        .myStyle{!id} { color:{!customColor}; }
    </style>

    <apex:outputText styleClass="myStyle{!id}" value="Please click here" />
</apex:component>

At the page we must to enter an id for each instance of component:

<apex:page>
    Text 1: <c:MyComponent id="First" customColor="red" /> <br/>
    Text 2: <c:MyComponent id="Second" customColor="green" />
</apex:page>

And now our main page will be rendered correctly, because each has an unique id:

enter image description here

[SalesForce] Visualforce component use custom id attribute

Controlling the Id can be achieved but no precisely as you mentioning .But there is a way to get Id populated as you want in Visualforce Page.

One way to do the same will be assigning Ids to All Compoenents on Page

Official Document link

<apex:page id="thePage">

<apex:form id="theForm">
    <apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
        <apex:pageBlockSection id="theSection">
            <apex:pageBlockSectionItem id="theSectionItem">
                All the alerts refer to this component.

                <p>The full DOM ID resembles something like this:<br/>
                thePage:theForm:thePageBlock:theSection:theSectionItem</p>
            </apex:pageBlockSectionItem>

            <!-- Works because this outputPanel has a parent in common 
                 with "theSectionItem" component -->
            <apex:outputPanel layout="block" styleClass="clicker"
                onclick="alert('{!$Component.theSectionItem}');">
                First click here
            </apex:outputPanel>
        </apex:pageBlockSection>

        <apex:pageBlockButtons id="theButtons" location="bottom">
            <!-- Works because this outputPanel has a grandparent ("theSection")
                 in common with "theSectionItem" -->
            <apex:outputPanel layout="block" styleClass="clicker"
                onclick="alert('{!$Component.theSection.theSectionItem}');">
                Second click here
            </apex:outputPanel>

            <!-- Works because this outputPanel has a distant ancestor ("theForm")
                 in common with "theSectionItem" -->
            <apex:outputPanel layout="block" styleClass="clicker"
                onclick="alert('
                {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
                Third click here
            </apex:outputPanel>
        </apex:pageBlockButtons>

    </apex:pageBlock>

    <!-- Works because this outputPanel is a sibling to "thePageBlock",
         and specifies the complete ID path from that sibling -->
    <apex:outputPanel layout="block" styleClass="clicker"
        onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
        Fourth click here
    </apex:outputPanel>

    <hr/>

    <!-- Won't work because this outputPanel doesn't provide a path 
         that includes a sibling or common ancestor -->
    <apex:outputPanel layout="block" styleClass="clicker"
        onclick="alert('{!$Component.theSection.theSectionItem}');">
        This won't work
    </apex:outputPanel>

    <!-- Won't work because this outputPanel doesn't provide a path 
         that includes a sibling or common ancestor -->
    <apex:outputPanel layout="block" styleClass="clicker"
        onclick="alert('{!$Component.theSectionItem}');">
        Won't work either
    </apex:outputPanel>

</apex:form>

Basically once you provide the ID for the Page and other sections the DOM will follow specific pattern which can be easily predicted and wont change across instances .

Best Answer

Related Solutions

[SalesForce] Can we use a custom Visualforce component twice on the same Visualforce page

[SalesForce] Visualforce component use custom id attribute

Related Topic