[SalesForce] Visualforce Styling – How to put command button after inputfield

I have a quick question regarding vf page styling. I have a page that looks like this

enter image description here

Basically, what I want to do is get the button "find study" to be on the right side of the field. My vf code looks like

<!-- Fields -->
        <apex:pageBlockSection collapsible="false" columns="2" id="pbsInfo" >
            <!-- Row 1 -->

            <apex:inputText value="{!query}" label="Protocol Number" id="inputField" >
            <apex:commandButton value="Find Study" action="{!runSearch}" reRender="pbsInfo" status="filterChangeStatus" />  
                <apex:actionStatus id="filterChangeStatus">
                        <apex:facet name="start">
                            <apex:image value="/img/loading.gif"/>
                        </apex:facet>
                </apex:actionStatus>
            </apex:inputText>

I've tried using html tags like div and span, but haven't been able to get it to work. Without creating a 3rd column, does anyone know how to solve this issue?

Best Answer

I got the answer after playing around with it for a while. Just added style="float:left" to the input text field

<apex:inputText value="{!query}" label="Protocol Number" id="inputField" style="float:left">
        <apex:commandButton value="Find Study" action="{!runSearch}" reRender="pbsInfo" status="filterChangeStatus" />  
            <apex:actionStatus id="filterChangeStatus">
                    <apex:facet name="start">
                        <apex:image value="/img/loading.gif"/>
                    </apex:facet>
            </apex:actionStatus>
        </apex:inputText>

Related Solutions

[SalesForce] Command Button Invoke Action After Async JavaScript

The answer is apex:actionFunction to generate a JavaScript function bound to an APEX method that can be passed as a JavaScript callback.

Let's try to understand, what happens when pressing your button:

<apex:commandButton action="{!buildFax}" onclick="checkForCharts(function(){return true});" value="Build Fax" />

Of course, the onclick code is executed first. It means invoking checkForCharts, that correctly starts the asynchronous workers and returns no value. Then the returned value (in our case nothing, or rather the undefined constant) is checked:

if it's identical to false, no further actions are executed,
otherwise the action method is called normally.

Thus the method buildFax is called immediately after setting up workers, not waiting for evaluation of the callback.

After this long introduction, the fix is easy:

<apex:actionFunction action="{!buildFax}" name="doBuildFax" />
<apex:commandButton value="Build Fax" onclick="checkForCharts(doBuildFax); return false;" />

[SalesForce] Styling a Command Link as Command Button

I can't tell you why the padding isn't being applied without seeing your page, but I suggest that you check to see whether the styling is being overridden by another element; you can do this using the Developer Console.

With regard to your second point, you would need to copy the definition for btn into MyBtn - but if btn is a Salesforce-defined class, this is not a good idea (as your copy may become outdated with future updates to Salesforce).

Best Answer

Related Solutions

[SalesForce] Command Button Invoke Action After Async JavaScript

[SalesForce] Styling a Command Link as Command Button

Related Topic