2

In my attempt to add arrows to my Jquery dialog boxes, I've been following the approach outlined here.

However, this solution makes use of Jquery's ui-resizable-* classes, but I don't want my dialog boxes to be actually resizable.

Is there another interaction I can use instead of resizable, or is there a way of keeping the resizable handles but disabling the resizable functionality?

Community
  • 1
  • 1
Isaac Kleinman
  • 3,994
  • 3
  • 31
  • 35
  • 1
    Glad to see you got an answer (which I have already upvoted) after our quick conversation on the other question :-) – andyb Apr 29 '14 at 19:06

1 Answers1

2

You may simply use .ui-dialog class instead, just adjust arrow positioning a bit

see working fiddle

paulitto
  • 4,585
  • 2
  • 22
  • 28
  • I see your example, but I'm trying to understand how that works: shouldn't the `before` and `after` of the dialog be in two different places? The `before` and `after` of `ui-resizable-*` being in the same place makes sense to me, but how does that work for an entire dialog box? – Isaac Kleinman Apr 29 '14 at 13:08
  • consider `before` and `after` as a standalone elements, they're absolutely positioned so can be placed anywhere, and since the dialog box itself is made `overflow:visible` they can be visible even out of it – paulitto Apr 29 '14 at 13:16
  • I'll give that a shot. In my case, I want the arrow on top of the dialog box, pointing up. Also, I've removed the titlebar: [fiddle](http://jsfiddle.net/isaackleinman/E955W/) – Isaac Kleinman Apr 29 '14 at 14:33
  • 1
    you can make it same way for top,left,right whatewer. btw consider using [bootstrap popovers](http://getbootstrap.com/2.3.2/javascript.html#popovers), you can include them separately, without rest of bootstrap – paulitto Apr 29 '14 at 15:22
  • Thanks for pointing that out; extremely helpful. Browsing through a couple of those plug-ins makes a lot of my recent work superfluous! – Isaac Kleinman Apr 29 '14 at 16:01