Remove Frustrations…Scrollbar Be gone!
Everyone once in a while we do a tutorial about the Divi Builder UI itself, and today is a good one! By the time you see this post, Elegant Themes may have already fixed it – but there has been a bug that sets the wrong max height for the inner settings modal, forcing you to scream — and then after that, to use the little blue scrollbar just to see anything. Today, I have a fix for that! And even after they fix this but, it’s still very practical, so be sure to see why. In this tutorial, I will show you how to increase the height of the inner Divi builder field setting modal UI and make it usable again!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
The Problem
Let’s start by explain the problem to those who may be unaware. I started around the end of 2021/beginning of 2022, but I’m not sure which version of Divi exactly. But basically any of the inner modals, the popup setting boxes inside a module settings window, were all very short. Like, so short you had to use the little blue scroll every single time, no matter what! I’m referring to the inner modals like when using dynamic content.
The Solution
I put up with this for a while, too lazy to report it to Elegant Themes. Which is a very bad thing, as how are they supposed to know about a bug unless we tell them? Note to self, and to you — always report things! Anyhow, I got sick of it one day and knew it was a very simple line of CSS, so I found it. Now I am sharing it with you!
And just to clarify. Even when they fix this bug, this is still a super helpful, practical UI change. Because even without a “bug” the windows are still not very tall, and still go to a scrollbar. So why not make these taller anyhow!
Why not? The above screenshot shows that increasing the max height eliminates the need for the scrollbar. There is plenty of room on the page for this to be taller, and I quite like it this way!
Where To Paste The CSS Code
If you are using Divi Assistant, simply paste the code below into the CSS tab of the code editor window (be sure to enable it in the Code Helper settings).
If you are using a child theme such as our free Divi child theme, place this snippet into the style.css file.
Otherwise, you can place this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*increase the height of the Divi inner field settings modal*/
.et-fb-field-settings-modal {
max-height: 500px!important;
}Don’t you wish all problems were that easy?
Hey, be sure to check my other Divi Builder UI tutorials! They all involve hacking and modifying the Divi user interface, and I guarantee you will find at least one or more of them useful!
How To Increase The Height Of The Divi Builder Settings Popup Using Divi Assistant
Here are the simple steps to increase the height of the Divi Builder settings popup using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Utility Helper tab and the Visual Builder subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
Great post, much appreciated all that you do. You are the Divi Whisper… In increasing the height of the Divi Builder field this was great but my challenge is with the individual field where you have to select an option, say Choose the type of Field: Input, Check box, etc… Can this window be enlarged? Right now it is hard to scroll to the next item. Any help greatly appreciated
Yes sure anything like that can be adjusted also. If you send us a message with a screenshot of the types of fields you mean, we will check and consider another tutorial if needed.