Arrow in Bottom of jQuery Dialog

Question

I'm using jQuery Dialog and i need to show an arrow tip on bottom center of jQuery Dialog like below.

How can i do this ?

Spastic

Answer 1

One idea is to use the ::after and ::before pseudo-elements to place 2 CSS triangles (see How do CSS triangles work?) over the top of each other, one white and one grey in order to create a triangle outline. Also need to allow the shapes to be visible "outside" of the .ui-dialog so I added overflow:visible; to that selector - see demo.

.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    border-style: solid;
    border-width: 10px;
}

.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}

.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}

.ui-dialog {
    overflow:visible;
}

Note: This is similar to how it is done in Google Calendar, but instead Google use 2 x <div>

Beverlee

Do you know how to Hide Title bar and Show Close Button in jQuery Dialog ? – Spastic

I'll see if I can help with as well :-) – Beverlee

Actually i need to add close button like in picture in this question. – Spastic

I have added an answer to the other question, which I hope helps. I also suggest asking another question if you need to modify the close button or text as this can be complicated, depending on what you want. I've explained why in my other answer - #17672945 – Beverlee

@andyb: Can this technique only be used if the dialog box is actually resizable, or is there another interaction that can be used instead? I'd rather not have my dialog box resizable. – Soredium

@IsaacKleinman For this solution, it needs to be resizable because the added CSS is tied to the classes added for resizing the dialog. It should be possible to make it work when the dialog has resizable: false. I would ask another question for that (if it has not already been asked) and reference this one in the question. If I have the time I will try to answer the new question, but if not at least someone else might answer! – Beverlee

Answer 2

You could either use CSS3 to create a 45 degrees rotated squared or a png image with a rotated square int it.

In both case you would place it in absolute position to stick it to the bottom.

For the CSS3 option, use bottom: -Npx; where N is (side * sqrt(2) / 2) and same for the left:

For the image option, use half the width/height instead of that calculation.

Cajeput

Answer 3

You can copy one of these, and use them as text in your code, and then position the in the center. : Ʌ, ˄, ᴧ, ↑, ▲

(Make sure to the encoding of your editor is UTF-8)

If you need more characters, you can find them in the character map, if you are using windows.

Midland