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

[Cherry]

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?

[PotatoMato]

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

[astroboy]

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/

[Cherry]

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.

[Cherry]

On 8/1/2021 at 6:17 AM, astroboy said:

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/

Thank you so much.. It works.

[TellMeWhy]

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?

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: