Make resizeable handle visible on a canvas with specified dimentions

Question

I'm dynamically creating a canvas element with a random width and height.

<div class="randBox">
    <canvas width="250px" height="100px" id="box"></canvas> 
    <!--width and height of the canvas is dynamic. I've used a fixed size for this example.-->
</div>

When I use the jquery resizable handle

jQuery('#box').resizable({
    handles: 'se'
});

css:

#box{
    background-color: red;
}

.ui-resizable-se{
    background-color: blue;
    width: 10px !important;
    height: 10px !important;
    bottom: 0px !important; /* E.g.: I want this at -15px */
    right: -5px !important; /* E.g.: I want this at -15px */
    display: block !important;
}

The resizable handle is hidden. Basically it looks like the handles are cropped to the canvas size.

How do I make the resizeable handle completely visible?

Example Fiddle

**[The answers here might help you](http://stackoverflow.com/questions/11368477/dynamically-resize-canvas-window-with-javascript-jquery)** and **[This link too](http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/)** — Guruprasad J Rao, Mar 16 '15 at 12:58
Make sure that jquery-ui.css is loaded correctly (look for the errors in inspect element). You should add in the head tag. — Crepi, Mar 16 '15 at 13:08

score 0 · Accepted Answer · answered Mar 16 '15 at 14:41

While it's not exactly a best practice, it should work for this example. The .ui-wrapper element has some CSS written directly onto it by the jQuery UI library, which sets its overflow to hidden. To allow your handle to be seen outside of the size of the canvas element, add:

.ui-wrapper {
    overflow: visible !important;
}

You can see it working here: http://jsfiddle.net/ceyzbjwd/3/

Make resizeable handle visible on a canvas with specified dimentions

1 Answers1