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.

gcal

How can i do this ?

score 4 · Accepted Answer · edited May 23 '17 at 12:24

4

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>

edited May 23 '17 at 12:24

Community

1
1

answered Jul 16 '13 at 10:22

andyb

43,435
12
121
150

Do you know how to [Hide Title bar and Show Close Button in jQuery Dialog](http://stackoverflow.com/questions/17672445/hide-title-bar-and-show-close-button-in-jquery-dialog) ? – Bishan Jul 16 '13 at 10:33
I'll see if I can help with as well :-) – andyb Jul 16 '13 at 10:36
Actually i need to add close button like in picture in this question. – Bishan Jul 16 '13 at 10:40
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 - http://stackoverflow.com/questions/17672445/hide-title-bar-and-show-close-button-in-jquery-dialog/17674708#17674708 – andyb Jul 16 '13 at 10:59
@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. – Isaac Kleinman Apr 28 '14 at 14:30
1

@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! – andyb Apr 28 '14 at 16:20

score 0 · Answer 2 · answered Jul 16 '13 at 09:43

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.

score 0 · Answer 3 · answered Jul 16 '13 at 09:52

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.

Arrow in Bottom of jQuery Dialog

3 Answers3

Linked