1

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>
0

3 Answers 3

1

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.

2
  • 1+ Great almost there but did you see I have By which is on top left corner how can I bring that back between input textbox and dropdown
    – Nick
    Aug 7, 2015 at 13:27
  • That's easy. It actually makes the other solution simpler too. I hadn't noticed that the 'By' wasn't inside any table tags. With the tags <td> and </td> you open and close a new column in a html table. If you replace the 'By' with <td> By </td> than it will be placed at the right position. You can then use the width attribute to make this column wider. You'd end up with <td style="width: 50px;"> By </td> .
    – Kasper
    Aug 7, 2015 at 13:35
0

Just add margin margin-right:NNpx; in td in which you have input element of type text as described below

<td style="width: 20%; margin-right:10px; "><apex:inputText style="width:100%" value="{!SearchText}" /></td>

I hope it will work.

1
  • It did not work make no diff
    – Nick
    Aug 7, 2015 at 12:19
0

Try the padding instead of margin. It will work!!

Find below code to check: <apex:page controller="spacingandalignment"> <apex:form > <table> <tr> <td style="padding-right:10px !important;"><apex:inputText /></td> <td><apex:selectList size="1" ><apex:selectOptions value="{!listvalues}"></apex:selectOptions></apex:selectList></td> </tr> </table> </apex:form> </apex:page>

You must log in to answer this question.

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