Bulk Edit Responsive Modal Window

[aam82]

Hi, if you're like me, you want to optimize the Bulk Edit modal window for smartphones. This CSS works for me:

http://cameronbaney.com/2012/07/26/pure-html5css3-responsive-modal-window/

 

add it to #BulkUpdateForm

 

[DesiLogi]

Hi- This would be REALLY great if I can get it to work. Can you post exactly where #BulkUpdateForm is located (is it in a Style sheet, and if so, where exactly?) and where exactly to paste the code?

 

Also, I looked at your link and it was hard to tell the exact code to use. I'm somewhat new with Caspio and css so a step-by-step instruction would be extremely helpful (to other Caspio users too, I imagine) and very much appreciated- thanks for the help.

[Kurumi]

Hi! I would like to share this helpful video from Caspio Labs about using modal in DataPages:

Check the description to download the files needed.

[Kurumi]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>

 

[Kurumi]

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style> 

 

[futurist]

 Hi, 

sharing this bulk edit feature I came up with that you might find useful: