Jump to content
  • 1

Move Buttons to Side Of Search Box


kpcollier

Question

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>

 

captcha.PNG

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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:

image.png.9494af2de580b1530ff181983ec7ac21.png

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

image.png.581c1698fde4e6d14f7a46bd612d29dd.png

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

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

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

 

captcha.PNG

you are welcome

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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.

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...
×
×
  • Create New...