Inquiry Regarding Bootstrap Modal Window Configuration

[MarkMayhrai]

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

html

<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>
</div>
</div>
</div>
</div>
<script>
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=document.createElement("script");
dataPageScript.src = cbDataPagePrefix + appKeys[i].trim() + "/emb" + params;
container.appendChild(dataPageScript);
}
}
// function - deploy DP in modal
function openModal(modalTitle, appKey, params, size) {
$("#cb-modal-body").html("");
if (size) {
$("#cb-modal .modal-dialog")
.removeClass("modal-sm modal-md modal-lg modal-xl")
.addClass(size);
}
deployDP("cb-modal-body", appKey, params);
$("#cb-modal-title").html(modalTitle);
$("#cb-modal").modal({
backdrop: "static",
keyboard: false,
});
}
</script>

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

html

<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

[Volomeister]

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:
 

<style>
  .modal-content {
width: 550px!important;
}
</style>

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

[MarkMayhrai]

Hi there @Volomeister,

Everything is working smoothly with your advice! Thank you so much!