Two buttons in the same line

[thead]

Hello,

I have created a buttons into my DataPage but I can't align them in the same line. Please see below codes that I created and the screenshot of the output:

<center>
<a href="https://c0hbs831.caspio.com/dp/24f5a0009f29342371034eae9ecb" ><input type="submit" style="font-family:Arial;margin-bottom:3%;display:none;font-family:Arial;"  class="cbSubmitButton cbApprove" id="Approve" value="Approve"/></a>
<a href="https://c0hbs831.caspio.com/dp/24f5a0009f29342371034eae9ecb" ><input type="submit" style="font-family:Arial;margin-bottom:3%;display:none;font-family:Arial;" class="cbSubmitButton cbApprove" id="Save" value="Save"/></a>
<a href="https://c0hbs831.caspio.com/dp/24f5a0009f29342371034eae9ecb" ><input type="button" style="font-family:Arial;margin-bottom:3%;font-family:Arial;" class="cbSubmitButton cbApprove" id="Approve" value="Back"/></a>
</center>

<script>
if("[@field:Status]"=="Approved"){
document.getElementById('Save').style.display="block";
}
else if("[@field:Status]"=="Draft"){
document.getElementById('Approve').style.display="block";
}
else if("[@field:Status]"==""){
document.getElementById('Save').style.display="block";
}
document.getElementById('Save').onclick = function(){ 

document.getElementById('EditRecordStatus').value = "Draft";
};
document.getElementById('Approve').onclick = function(){ 

document.getElementById('EditRecordStatus').value = "Approved";
};
</script>

Is it possible to align the two buttons in the same line?

[April]

Hi Thead,

It is possible to show the two buttons in the same line you just need to replace your code into this:

<script>
if("[@field:Status]"=="Approved"){
document.getElementById('Save').style.display="inline-block";
}
else if("[@field:Status]"=="Draft"){
document.getElementById('Approve').style.display="inline-block";
}
else if("[@field:Status]"==""){
document.getElementById('Save').style.display="inline-block";
}
document.getElementById('Save').onclick = function(){

document.getElementById('EditRecordStatus').value = "Draft";
};
document.getElementById('Approve').onclick = function(){

document.getElementById('EditRecordStatus').value = "Approved";
};
</script>

Hope this helps.

[autonumber]

Hi! You may also want to checkout these links for adding CSS code and how you can customize your DataPage. 

https://www.youtube.com/watch?v=KxcEHFzk2o0

https://www.youtube.com/watch?v=DQJscbV5prE

https://www.youtube.com/watch?v=Fzf0efn_B5s

 

[Wikiwi]

What I usually do when I want to add custom button on my DataPage and I want to align it to the default button is to hide the button included to the DataPage. To do this I put the following script in my footer.

<!-- 2 input tags for the buttons -->

<input type="submit" name="Mod0EditRecord" id="Custom_Edit" value="Update" class="cbUpdateButton"> 
<input id="2nd_button" value="2nd Button" class="cbUpdateButton"> 

<script>

//Hide the ACTUAL button
document.querySelector("input[id*='Mod0EditRecord']").style.display = "none";
</script>

Output:

 

 

[Flowers4Algernon]

Hello! Just wanted to share this related article if you want to have your button inline with fields: https://howto.caspio.com/tech-tips-and-articles/display-the-submit-or-search-button-inline/