[SalesForce] Space & aligning between – Visualforce Page

How can I have space between search and a dropdownlist and align the top command button and image

enter image description here

 <table style="width: {!aWidth}">
        <tr>
          <td style="width: 20px;"><span class="labelCol">Search:</span></td>
          <td style="width: 20%"><apex:inputText style="width:100%" value="{!SearchText}" /></td>
          By
          <td style="width: 20%"><apex:selectList value="{!selectedVal}" size="1"><apex:selectOptions value="{!openPresentationOptions}" /> </apex:selectList></td>
          <td>
            <span style="float: left;">&nbsp;</span>
            <apex:actionStatus id="SearchIcon">
              <apex:facet name="start">
                <apex:outputPanel >
                  <apex:commandButton style="float: left;" disabled="true" value="Find" />
                  <img style="float: left;" src="/img/loading24.gif" />
                </apex:outputPanel>
              </apex:facet>
              <apex:facet name="stop">
                <apex:outputPanel >
                  <apex:commandButton action="{!Find}" value="Find" rerender="BoxPanel" status="SearchIcon" />
                </apex:outputPanel>
              </apex:facet>
            </apex:actionStatus>
            <span title="Search the text by providing or click to find all"><img style="vertical-align: middle;" src="http://png-3.findicons.com/files/icons/1156/fugue/16/question_frame.png" /></span>
          </td>
        </tr>
      </table>

Best Answer

For the spacing i think you'd need:

table {
border-collapse: separate;
border-spacing: 10px;
}

See https://css-tricks.com/almanac/properties/b/border-collapse/

For the button alignment i think you can just add the following style to the command button:

position: relative; top: -3px;

I haven't tried either though.

Related Topic