Form Control with CBE

Show All | Hide All | Reset | Cross-Browser.com

Features

The form containers can be dragged by clicking and dragging on their title bar.

The form containers can be resized by clicking and dragging on their lower-right corner.

The form containers come to the top when they are clicked anywhere.

There is a relatively positioned marker after each textarea. This is used to resize the form container to fit its contents. The marker is visible so you can see how it flows with the container's contents when the container is resized.

Click the OK button to display the values of the form controls.

Browser Tests

Some quick tests on Win2K (10-18-02).

Mozilla 1.1

Moz does not use the native form controls, but implements its own. And so they respect the z-index of their container. Dragging is choppy but this is a common problem with Moz. It seems that the mousemove event is not issued until the mouse stops moving.

IE 5.0

The Select element "shows through" any element above it. Dragging is smooth except for the repainting of the Select element. Why does it reflow the page after choosing a Select option?

Opera 6.01

All form controls "show through". Dragging is smooth. Has the usual clipping problems. Event propagation is not robust.

Navigator 4.79

All form controls "show through". Dragging is smooth. Does not draw the borders. Title bar Div is only the size of its content instead of filling its container. Could not get the auto-sizing technique to work.

Form Container #1
Yes   No
X
Form Container #2
Yes   No
X