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:pageBlock title="the {!objLabel} block..." id="xBlock">
        <apex:repeat value="{!filter.criteria}" var="block" id="theRepeat">
            <c:vfCriteriaBlock block="{!block}" id="theValue"/>

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 headerValue="Field" width="30%">
        <apex:selectList value="{!row.xfield}" size="1">
            <apex:selectOptions value="{!row.FieldList}"/>
            <apex:actionSupport event="onchange" reRender="ops" />
    <apex:column headerValue="Relation" width="30%">
    <apex:selectList id="ops" value="{!row.operator}" size="1">
        <apex:selectOptions value="{!row.OperandTypes}"/>
    <apex:column headerValue="Filter Value" width="30%">
        <apex:inputText value="{!row.filterValue}" /> 


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

1 Answer 1


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

Either set


like this

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

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

  • You are my hero. Jul 25, 2014 at 18:27
  • @LucidLunatic happy I could help :)
    – Rao
    Jul 25, 2014 at 18:30

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.