Jump to content
  • 0

Move the search button inline with the field like in the picture attached


Cherry
 Share

Question

5 answers to this question

Recommended Posts

  • 0

Hi @Cherry, you may insert an HTML block to your elements and enable the 'Continue next element on the same line' on the "last name" field, then insert the code below on your HTML block

<style>
.cbSearchButtonContainer {
display: none !important;
}
</style>

<input class="cbSearchButton" id="searchID" name="searchID" style="margin-top: -10px" type="submit" value="Search" /> 

You may adjust the value of the margin-top depending on your preference.

 

-Potato

Link to comment
Share on other sites

  • 0
9 hours ago, PotatoMato said:

Hi @Cherry, you may insert an HTML block to your elements and enable the 'Continue next element on the same line' on the "last name" field, then insert the code below on your HTML block

<style>
.cbSearchButtonContainer {
display: none !important;
}
</style>

<input class="cbSearchButton" id="searchID" name="searchID" style="margin-top: -10px" type="submit" value="Search" /> 

You may adjust the value of the margin-top depending on your preference.

 

-Potato

On top of this, make sure to disable the HTML editor on the advanced tab before pasting the code. Here's a HowTo article for more information:

https://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

Link to comment
Share on other sites

  • 0
On 7/31/2021 at 9:11 PM, PotatoMato said:

Hi @Cherry, you may insert an HTML block to your elements and enable the 'Continue next element on the same line' on the "last name" field, then insert the code below on your HTML block

<style>
.cbSearchButtonContainer {
display: none !important;
}
</style>

<input class="cbSearchButton" id="searchID" name="searchID" style="margin-top: -10px" type="submit" value="Search" /> 

You may adjust the value of the margin-top depending on your preference.

 

-Potato

Thank you so much.. It works.

Link to comment
Share on other sites

  • 0
On 7/31/2021 at 2:06 AM, Cherry said:

Hi guys,  just want to ask help from you here, I am not so good in coding. How can I move the search button  beside the 'Last Name ' field?

1.PNG

Alternatively, you can use the following: 

<style>

.cbSearchButtonContainer{

grid-row: 1 !important;
grid-column: 5 / span 4 !important;

padding-top:30px !important;

}

</style>

row depends on what row you want to put it to.

Column depends on the position on the specific row, just play with it, keep the span to 4

padding is just to adjust the specific position in the column and row

 

Sample:

image.png.bc72c950d425f23ee7b0558b373da8e2.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...