Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Increase The Height Of the Divi Builder Field Setting Modal UI

Nelson Miller Profile Orange
In this tutorial I will show you how to remove the scrollbar and increase the height of the inner Divi Builder settings modal UI.

▶️ Please watch the video above to get all the exciting details! 👆

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.

bug with the Divi Builder field setting height and scrollbar

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!

make the Divi Builder field setting modal windows taller and remove blue scrollbar

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 the Divi Assistant plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. AK <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply

Comments By Others

  1. Randy Hunt

    Thank you Nelson! Question, what are using to add the Copy to Clipboard function?

    Do you think there is a way, for me to have just a field that a user could input text, and then there is a copy to clipboard button that would capture what the user typed?

    Thanks so much!

    Reply
  2. max

    Good work. Thanks mate!

    Reply
    • Hemant Gaba

      Hey Max,

      We are glad you liked the guide. Stay tuned for more such content.

      Reply
  3. Petar Pavlov

    Great tutorial, thank you!

    One question, why you are using max-height instead of min-height?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart