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}">
          <td style="width: 20px;"><span class="labelCol">Search:</span></td>
          <td style="width: 20%"><apex:inputText style="width:100%" value="{!SearchText}" /></td>
          <td style="width: 20%"><apex:selectList value="{!selectedVal}" size="1"><apex:selectOptions value="{!openPresentationOptions}" /> </apex:selectList></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:facet name="stop">
                <apex:outputPanel >
                  <apex:commandButton action="{!Find}" value="Find" rerender="BoxPanel" status="SearchIcon" />
            <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>

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.

|improve this answer|||||
  • 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 Kahn Aug 7 '15 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 '15 at 13:35

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.

|improve this answer|||||
  • It did not work make no diff – Nick Kahn Aug 7 '15 at 12:19

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>

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.