Code not working on JS Fiddle

Question

So I'm trying to showcase an issue I have in an application by providing a JS Fiddle, but now I have an xtra problem, my code won't work on JS Fiddle!

Basically when you click and drag in the Canvas area (the one with the dashed border) you should be able to create rectangles, but none of that happens.

Fiddle here

I've used jsfiddle only a handful of times so I might be getting it wrong, but since I'm including many external libs (underscore, backbone, marionette, jquery-ui) I can't really pinpoint where things are going wrong. I based the fiddle on Derick Bailey's "Marionette Playground" and searched for common jsfiddle errors (tried the "no wrap body" but still nothing)

maybe is because I only use a script/template tag on my HTML?

<script id="app-tpl" type="text/template"> 
    <header id="mainmenu"> 
        this is a header
    </header>
    <section id="workspace">
    </section>
</script>

Any help would be apprectiated.

Answer 1

You just need to apply css height 100% to the screen element. In this case I also recommend disabling selection with user-select. Check this: http://css-tricks.com/almanac/properties/u/user-select/