Question

I am wondering why the following code isn’t working?

http://jsfiddle.net/zfY9S/

Thanks..

Answer 1

Try including a jQueryUI stylesheet. Or you may be able to get away with defining the following CSS classes:

.ui-resizable-handle {
    display: block;
    font-size: 0.1px;
    position: absolute;
    z-index: 99999;
}
.ui-resizable-s {
    bottom: -5px;
    cursor: s-resize;
    height: 7px;
    left: 0;
    width: 100%;
}
.ui-resizable {
    position: relative;
}
.ui-resizable-e {
    cursor: e-resize;
    height: 100%;
    right: -5px;
    top: 0;
    width: 7px;
}
.ui-resizable-s {
    bottom: -5px;
    cursor: s-resize;
    height: 7px;
    left: 0;
    width: 100%;
}
.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
}

Updated example: http://jsfiddle.net/PUBrS/