Chapter 10. Resizing

We have already seen resizables in action briefly when we looked at the dialog widget earlier in the book. This time, we're going to focus directly on this utility instead of looking at it incidentally. However, the dialog is a perfect example of how useful the resizable component can be in a real-world implementation.

The resizable is a flexible component that can be used with a wide range of different elements. For example, <textarea> elements that may have different amounts of user-entered text in them could be styled so the <textarea> would be quite small initially. Users could then resize it as they saw fit depending on how much text they entered into it.

Throughout the examples in this chapter, we'll mostly be using simple <div> elements so that the focus remains on the component and not on the underlying HTML. We will also look at some brief examples using <img> and <textarea> elements towards the end of the chapter.

In this chapter...