You’d think it would be easy, but keep reading. I can change many of the styles associated with a resizable JQuery Dialog, but not the handles. The code below isolates the problem. Why does the handle disappear entirely? There must be some logic I’m interfering with in ui.resizable.js, but I don’t see it.
<script type='text/javascript' language='JavaScript' src='jquery126.js'></script> <script type='text/javascript' language='JavaScript' src='ui/ui.core.js'></script> <script type='text/javascript' language='JavaScript' src='ui/ui.dialog.js'></script> <script type='text/javascript' language='JavaScript' src='ui/ui.resizable.js'></script> <script type='text/javascript' language='JavaScript' src='ui/ui.draggable.js'></script> <script> $(document).ready(foo); function foo() { $('#dlg').dialog() } </script> <style type='text/css'> .ui-resizable-n { background: green; } </style> <div id=dlg title='my title'>this is<br>my text</div>
I was able to get it to work. I couldn’t find the line of code my css was in conflict with, but when I added positioning and size related css, things worked. There must be some logic that says, ‘use the default css unless the programmer has supplied his own’. So, while I thought I was appending info, I was somehow swapping info.