Modals and Popups - Width, Height, Headers, Footers, Buttons

Showcase Tips and Tricks
1

I have found modals can be fantastic for apps keeping the user feeling grounded to a location; not uncertain how to get back to a page, but still able to view, add, or edit different information. I found the generic modal to be clunky and distracting feeling so I used some css to improve the experience (in my opinion :slight_smile:). Thanks to several other posts for insights. I thought I would share share in this post to pull it together and show a little more.

This will allow you to control the width and height of a modal, remove the top header but keep the “x” button for closing, keep or hide the header title, and remove the bottom footer. You can apply (just copy, paste, and click save) it in the css tab of your page layout page to affect all modals built with that page layout or just in individual pages to customize more.

/********* Modals **************/
/*Resize modal*/
.modal-dialog {
width: 70% !important;
max-width: 1200px;
}
/*Hide header (b/c line), make Title and Button visible, adjust positions, add padding*/
.modal-header{
visibility: hidden;
}
.modal-header > button{
visibility: visible;
z-index: 100;
}
.modal-title{
visibility: hidden;
/position: absolute;/
/left: 3%;/
/top: 2.5%;/
}
.modal-body{
padding: 50px;
padding-top: 0px;
}
/*Moves step icons of multi step forms up and adds space below*/
.form-navigation-pages {
position: relative;
top: -20px;
margin-bottom: 25px;
}
/*Hide modal footer - don’t want extra close button*/
.modal-footer{
display: none;
}
/****************/

ALSO - Tables – Here is a great post doing something similar with those. Cleaner Pages! (How to hide unwanted component headers and footers) - Community Discussions / Tips and Tricks - Tadabase Community

4 Likes
2

Nice work! Here’s a little code to add at the end of the css to enhance the mobile view.

@media only screen and (max-width: 600px) {
  
.modal-dialog {
width: 95% !important;
}

.modal-body{
padding: 20px;
}
}
3 Likes
3

Great call Cam. I made some improvements since this. Once I am done I will try to update this.

2 Likes
4

Thank you very much for this post - just what I was looking for!

1 Like
5

@Biota
Same here!
Found what I’m looking for.