[SalesForce] How to use colspan in apex:pageBlockSection VF pages

How can I align the same Emp Department fields with the Employee pageBlockSection? I have tried all sort of technics but no success

What I want is simple align with Employee pageblockSection.

Also I have tried in developer console and if I changed from colspan=2 to 4 then its align perfectly the way i wanted but I could not able to make using visualforce page.

Visualforce page:

<apex:pageBlockSection id="pbs" title="Employee" columns="2" >

    <apex:inputField value="{!Employee__c.start_Date__c}"  />
    <apex:inputField value="{!Employee__c.Enrollment__c}" />
    <apex:inputField value="{!Employee__c.end_Date__c}" />
    <apex:inputField value="{!Employee__c.status__c}" />           

    <apex:sectionHeader title="Emp Department"   />
    <br/>

    <apex:pageBlockSection title="Emp Department" id="pbs2" columns="2"   >   
        <apex:inputField value="{!Employee__c.Type__c}"  />
        <apex:inputField value="{!Employee__c.Customer__c}"  />
    </apex:pageBlockSection>   

</apex:pageBlockSection>

Best Answer

You put a pageBlockSection inside a pageBlockSection. This is what's screwing you up; the second section appears in the first section's left column when you do this. Furthermore, sectionHeader is really meant to be the thing at the top when you're looking at a record. Your code should probably look as follows:

<apex:pageBlock>
    <apex:pageBlockSection id="pbs" title="Employee" columns="2" >
        <apex:inputField value="{!Employee__c.start_Date__c}"  />
        <apex:inputField value="{!Employee__c.Enrollment__c}" />
        <apex:inputField value="{!Employee__c.end_Date__c}" />
        <apex:inputField value="{!Employee__c.status__c}" />           
    </apex:pageBlockSection> 
    <apex:pageBlockSection title="Emp Department" id="pbs2" columns="2"   >   
        <apex:inputField value="{!Employee__c.Type__c}"  />
        <apex:inputField value="{!Employee__c.Customer__c}"  />
    </apex:pageBlockSection>   
</apex:pageBlock>

Related Solutions

[SalesForce] Getting the value of an inputField on the page

I would suggest just updating your component to:

<apex:outputPanel id="invoiceData">
    <c:invoiceDataComponent countryCode="{!Invoice__c.Country__c}" />
</apex:outputPanel>

I believe by adding the ActionSupport to your your code should already be updating the value on the controller, so when your component rerenders it should have the updated value.

[SalesForce] Angular

Tehnrd,

Long story short:

ng-options validates the Options list it generates against the evaluated scope statement given to it.

From your source above, '--choose color--' isn't part of the $color array. While the docs specifically mention using a option element with an nil value for the "nothing selected" element, I've discovered that visualforce strips the options tags that have a nil value. If you look at your visualforce rendered source, the nil value option element is missing. Because the element is missing, ng-option is inserting a blank select option.

Two ideas for a direct workaround

1: Given a select object with id "colorSelect":

angular.getElement('#colorSelect').append('<option value=\'\'>--choose color--</option>');

before your ng-options directive is executed. thats ugly and hacky and i don't like it. Likewise you could alter the value, if you chose that way. Thats actually probably a better way.

2: I think the most-elegant way to do this (and it's still lipstick on a pig) is to add your '--choose color--' option to the $scope.colors array as a value. Ng-options will render it as the selected option once you set $scope.color = '--choose color--'

Then create a watch function that removes '--choose color--' from the array when $scope.color changes.

Here's a js Fiddle with the watch statement doing it's job and the default being chosen from teh given array.

http://jsfiddle.net/Nr9L4/

Best Answer

Related Solutions

[SalesForce] Getting the value of an inputField on the page

[SalesForce] Angular for null not working in Visualforce

Related Topic

[SalesForce] Angular