1

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?

2
  • why do u hv the command button nested inside the inputText ? did u try moving it out of inputText ? Feb 18, 2015 at 2:17
  • @VamsiKrishna I had the command button inside the inputText so that they will be grouped together. I solved this issue, please see answer
    – rwegner7
    Feb 18, 2015 at 2:50

1 Answer 1

2

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>

You must log in to answer this question.

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