Move Buttons to Side Of Search Box

[kpcollier]

Hey there. I've got several buttons in the footer of my Search page, so clients can more easily navigate. Currently, I have them aligned on the bottom. I am trying to get them to align to the right of the search box. Could anyone help me out with that?

<div class="searchcontainer">
 <a class='cbTAssign' 
 href='https://xxxxxxxx.caspio.com/dp/e75050006d465676820a48dea6ad'>Tech W/O List</a>
 <a class='cbTAssign' 
 href='https://xxxxxxxx.caspio.com/dp/e7505000cffb52a67f684cb9a466'>Assign Tech</a>
 <a class='cbAddClient' href='https://xxxxxxxx.caspio.com/dp/e7505000e85f439dbd814fa4af51'>Closed Work Orders</a> 
</div>

 

[Aether]

Hi @kpcollier,

You can try to add and customize the button style for you to be able to do that.

For Example, you can try this similar workflow:

Add this code in the header of your search form:

<style>
input[type="button"] {
    background-color: #008CBA;
    width: 150px;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

#customstyle {
    position: fixed;
    padding: 24px 3px;
    margin: -69px -10px;
    cursor: pointer;
}

</style>

Then insert an HTML Block in the very bottom of the search form  to add this code:

<div id="customstyle">
 <input type="button" value="Go to Google" 
onclick="window.location.href='https://google.com/'" />
</br>
</br>
 <input type="button" value="Caspio site" 
onclick="window.location.href='https://caspio.com/'"/>
</br>
</br>
 <input type="button" value="Check YouTube" 
onclick="window.location.href='https://youtube.com/'"/>
<div>

Important note:

- Add the button(s) (HTML Block) in the very last part of the form.

- Check "Continue next element on the same line" in the advanced option of the field before the HTML Block where the button is located:

- Make sure that you unchecked the "Enable HTML editor" in the advance option of your Header and HTML Block.

- This is a custom CSS code and adjustment/configuration might not be compatible in your current search form so you will need to change the (padding and margin) to adjust them.

You can check the result here:

https://c1abv183.caspio.com/dp/482760006540f98089034387a563

I hope this helps

~WatashiwaJin~

[Aether]

You can also check and test in the w3schools some CSS, HTML, and other programming languages available for some customization 

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/html/default.asp

Or in the codepen site for much better result of customization:

https://codepen.io/

 

[kpcollier]

Thanks @WatashiwaJin for the detailed response! However, with the double border I have across all of my apps, it is a lot less appealing to have the additional buttons inside the 'search box'. I haven't figured out how to get a HTML block outside of the same container besides using Header/Footer for the placement of the buttons. Maybe, I'll just have to give in to stacking them on top of each other in the footer.

[Aether]

You are welcome @kpcollier well you can manually adjust them using the margin and padding to get the button outside the border of the search form.

If you have done the process I suggested above, can you provide the sample URL(JUST A SAMPLE) for me to provide you the style you wanted to accomplish?

You can also check the Caspio Online help center for helpful documentation that you might need.

[klimbo123]

On 5/15/2019 at 6:35 PM, kpcollier said:

Hey there. I've got several buttons in the footer of my Search page, so clients can more easily navigate. Currently, I have them aligned on the bottom. I am trying to get them to align to the right of the search box. Could anyone help me out with that?

<div class="searchcontainer">
 <a class='cbTAssign' 
 href='https://c3eku680.caspio.com/dp/e75050006d465676820a48dea6ad'>Tech W/O List</a>
 <a class='cbTAssign' 
 href='https://c3eku680.caspio.com/dp/e7505000cffb52a67f684cb9a466'>Assign Tech</a>
 <a class='cbAddClient' href='https://c3eku680.caspio.com/dp/e7505000e85f439dbd814fa4af51'>Closed Work Orders</a> 
</div>

 

you are welcome

do a visit for more helpful informations : https://howto.caspio.com/getting-started/?_ga=2.145532276.1306717516.1558201664-1587720473.1558201664

[kpcollier]

On 5/17/2019 at 3:44 PM, WatashiwaJin said:

You are welcome @kpcollier well you can manually adjust them using the margin and padding to get the button outside the border of the search form.

If you have done the process I suggested above, can you provide the sample URL(JUST A SAMPLE) for me to provide you the style you wanted to accomplish?

You can also check the Caspio Online help center for helpful documentation that you might need.

The datapage is not live yet, and I need to purchase more datapages before I can get it up. Could I give you an exported copy?

[kpcollier]

On 5/18/2019 at 10:51 AM, klimbo123 said:

you are welcome

do a visit for more helpful informations : https://howto.caspio.com/getting-started/?_ga=2.145532276.1306717516.1558201664-1587720473.1558201664

welcome for what

[Aether]

Hi @kpcollier,

As I said in the earlier response, you just need to adjust the margin of the style for your div. 

This is the result: 

Check it out here: https://c1abv183.caspio.com/dp/482760006540f98089034387a563

[Aether]

This is the exported sample DataPage you ask for: 

CaspioData_2019-May-22_1651.zip

I hope this helps  

 

[kpcollier]

On 5/22/2019 at 9:53 AM, WatashiwaJin said:

This is the exported sample DataPage you ask for: 

CaspioData_2019-May-22_1651.zip 26 kB · 1 download

I hope this helps  

 

Thanks @WatashiwaJin, I will check this out when I get a chance.

[DefinitelyNot31337]

- wrong post. please disregard

 

Thank you

[MayMusic]

You have to hide the actual search page and create a custom one.  Just inspect the code and copy it . The code should be something like:

<input type="submit" name="searchID" id="searchID_66de1888377503" value="Search" class="cbSearchButton">

To hide the button you can add the code below to the header:
 

<style>

input[name=searchID]{

display:none;

}

</style>

 

and since you are hiding the button by name remove name from the custom button code

[techguy]

May, I copied the code from the inspector, created an html block and copied it after my search fields. the new button shows up but i am not able to get the original one to go away, it is right still there as well.. any suggestions?

[CoopperBackpack]

Hello @techguy,

If you need to hide the Search button, you may hide the whole div element that contains the button.

Please paste this code to the Header section of the Search screen of the DataPage.

Do not forget to disable the HTML editor before pasting. 

<style>

.cbSearchButtonContainer {
display: none;
}

</style>

Hope this helps.