In this lesson, let's get our editor automatically adjusting its height to fit the height of the content. Why? Well, because CRMs can be very busy, so let's stick with our minimalistic approach that we started in the last lesson, and not clutter it up with another scrollbar. Now, auto-adjusting the height can be enabled with another plugin called auto-resize.
Then, we can configure it further to fit our needs with the following options. We'll add the min-height option, where we can specify a minimum height regardless of the size of the content. Let's go with 300. Notice that this assumes pixels.
You should provide a plain number without any units to minHeight. And same for maxHeight. This means that scrolling will kick in for any content that's longer than the number of pixels we provide. Let's say 500.
If we were to exclude this option altogether, the height would adjust indefinitely. Finally, let's provide a little space at the bottom of the editor with the auto resize bottom margin option. We'll set this to 20 so that there's just a little bit of room between the end of the content and the bottom of the editor. Let's try it out in the browser now.
With no content, the height is 300 pixels. If I type into the editor more content than the 300 pixels will hold, the height does auto-adjust. And then as soon as I hit 500 pixels worth of vertical space, we do get the scroll action back again. Perfect.
Works like a charm. Providing an auto-adjusting height for our editor keeps our interface clean and minimalistic. Perfect for the use case at hand and super easy to do with TinyMCE. In this lesson, let's get our editor automatically adjusting its height to fit the height of the content.
Why? Well, because CRMs can be very busy, so let's stick with our minimalistic approach that we started in the last lesson, and not clutter it up with another scrollbar. Now, auto-adjusting the height can be enabled with another plugin called auto-resize. Then, we can configure it further to fit our needs with the following options.
We'll add the min-height option, where we can specify a minimum height regardless of the size of the content. Let's go with 300. Notice that this assumes pixels. You should provide a plain number without any units to minHeight.
And same for maxHeight. This means that scrolling will kick in for any content that's longer than the number of pixels we provide. Let's say 500. If we were to exclude this option altogether, the height would adjust indefinitely.
Finally, let's provide a little space at the bottom of the editor with the auto resize bottom margin option. We'll set this to 20 so that there's just a little bit of room between the end of the content and the bottom of the editor. Let's try it out in the browser now. With no content, the height is 300 pixels.
If I type into the editor more content than the 300 pixels will hold, the height does auto-adjust. And then as soon as I hit 500 pixels worth of vertical space, we do get the scroll action back again. Perfect. Works like a charm.
Providing an auto-adjusting height for our editor keeps our interface clean and minimalistic. Perfect for the use case at hand and super easy to do with TinyMCE.