Jump to content

Inquiry Regarding Bootstrap Modal Window Configuration

Recommended Posts

Dear Caspio Support Team,

 I am reaching out to inquire about the configuration options for the Bootstrap modal window within Caspio.

I have been working on implementing Bootstrap modal windows within my Caspio forms, and I've encountered a situation where I need to adjust the size of the modal window. Specifically, I would like to inquire if there is a way to make the Bootstrap modal window longer, or ideally, if it's possible to set a default width and height for the modal window.

Currently, my implementation includes the following code in the header section of the parent page


<div class="modal fade" id="cb-modal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cb-modal-title">Modal title</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button></div>

<div class="modal-body">
<div class="cb-form-fluid cb-form-resp" id="cb-modal-body"></div>
var cbAccountId = "Removedforsecirty";
var cbAppKeyPrefix = "Removedforsecirty";
var cbDomain = 'https://' + cbAccountId + '.caspio.com';
var cbDataPagePrefix = cbDomain + "/dp/" + cbAppKeyPrefix;

// function - deploy DP asynchronously
function deployDP(containerID, appKey, params) {
var params = params || "";
var dataPageScript = "";
var container = document.getElementById(containerID);
container.innerHTML = "";
//for multiple DataPages
const appKeys = appKey.split(',');
for (i = 0; i < appKeys.length; i++) {
dataPageScript.src = cbDataPagePrefix + appKeys[i].trim() + "/emb" + params;
// function - deploy DP in modal
function openModal(modalTitle, appKey, params, size) {
if (size) {
$("#cb-modal .modal-dialog")
.removeClass("modal-sm modal-md modal-lg modal-xl")
deployDP("cb-modal-body", appKey, params);
backdrop: "static",
keyboard: false,

And for the button triggering the modal, here's the code snippet:



<a class="text-white mt-3 mb-4" onclick="openModal('Audit Log - Token#[@field:UniqueTranTag] :  [@field:Credit$]', 'cf60851e41dc4e76b57b', '?UniqueTranTag=[@field:UniqueTranTag]&amp;cid=[@field:CompanyID#]&amp;BANKCID=[@field:BankCompanyID]&amp;BC=[@field:BankCurrency]','modal-xl','w-100 p-3')" onmouseout="this.style.color='#00f'; this.style.textDecoration='none';" onmouseover="this.style.color='#00008B'; this.style.textDecoration='underline';" style="color: #00f; text-decoration: none;"><i class="fas fa-plus"></i>[@field:RefundedAmount$]</a>

code here v-->

Could you please provide guidance or documentation on how to achieve this? Any information or best practices you can share regarding the customization of the Bootstrap modal window within the Caspio platform would be greatly appreciated.

Thank you very much for your assistance. I look forward to your prompt response and guidance on this matter.



Best regards,

Mark Mayhrai

Link to comment
Share on other sites

Hello @MarkMayhrai

Without seeing the actual webpage where you deployed this solution it is hard to tell what is causing this behavior. It could be caused by conflicting styles of the website where it was deployed or something else.

I could suggest explicitly defining a width for the modal-content CSS class.

Code snippet will look something like this:

  .modal-content {
width: 550px!important;

If you need more tailored assistance, please share a link to the webpage where you implemented this solution

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.

Reply to this topic...

×   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.

  • Create New...