Implementing Split Pane Resizing Handles
This article is not about how to use JavaScript to implement a resizable split pane. In this article, we discuss how to implement the resizing handle of split panes with CSS.
Problem Description
The following figure shows a vertical split pane. Between the two panes, there is a resizing handle (displayed as a 1-pixel vertical gray line).
This design, if implemented carelessly, will frustrate the user, because the resizing handle will be very hard to grab.
However, if we increase the width of the resizing handle, we will lose the visual appeal of a minimalistic thin divider (see figure below).
We need a way to achieve both usability and the visual modernness.
Solution
My solution is to use a thick, transparent resizing handle, and use the right border of the left pane (or the left border of the right pane) to show the thin line. View the JSFiddle here.
