ansaurus

Question

Problem displaying a CSS 'popup' properly.

Answer 1

+1 A:

I'm not sure what, exactly, the problem is, but the following css works in Chrome 6.0.472.62 and Firefox 3.6.10 on Ubuntu 10.04:

#popup {
    position: relative;
}
#form {
    width: 12em;
    display: none;
}
#popup:hover #form {
    clear: both;
    margin: 0;
    display: block;
    position: absolute;
    top: 1em;
    left: 0;
}
#popup form select:focus,
#popup form select:hover {
    display: block;
}

Demo at: jsbin

And it's worth changing #popup to a div, as (I thought I) commented earlier.

David Thomas 2010-09-24 18:03:25

This does not work properly in IE8...

Christian Nesmark 2010-09-24 18:16:01

@Christian: there's two things to suggest: first, try my edited answer (originally I omitted to look at the 'when on select' part of your question, sorry), and second, what doctype are you using? Also: *invalid (x)html* will always cause problems. Your `#popup` **needs** to be a `div`, not a `span`.

David Thomas 2010-09-24 18:27:05

that still doesn't work(trying on firefox 3.6.x). Originally I had tried using selectors to match elements inside the div, but they simply don't work. thanks anyway.

Thiado de Arruda 2010-09-24 18:42:12

@Thiado: Which platform?

David Thomas 2010-09-24 18:51:36

Archlinux x86_64

Thiado de Arruda 2010-09-24 18:57:31

Ah, well. Looks like JS is definitely the way to go on this one, then.

David Thomas 2010-09-24 19:07:07

Answer 2

A:

You are showing the popup only on hover, so when the mouse leaves your popup, it is hidden,

You have to show it onmouseover of the span element, and hide it when the use clicks somewhere else on the page (other than the popup) or probably when he hits the close option on the popup.

I dont think you can do that with pure CSS. You would need some javascript.

Nivas 2010-09-24 18:11:23

The `#form` is contained *within* the `#popup` span, so the `:hover` should still apply to the `#popup` regardless. It certainly does in Chrome 6.0.472.62 and Firefox 3.6.10.

David Thomas 2010-09-24 18:15:46

Answer 3

+1 A:

I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I've added a "Done" button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I've understood your request correctly.)

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
        <script language="javascript">
        function showForm() {
            $("#form").show();
        }
        function hideForm() {
            $("#form").hide();
        }
        </script>
    </head>
    <body>
        <span id="popup" onmouseover="showForm()">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                    <input type="button" value="Done" onclick="hideForm()" />
                </form>
            </div>
        </span>
    </body>
</html>

Christian Nesmark 2010-09-24 18:30:44

I guess javascript can't be avoided at all, thanks.

Thiado de Arruda 2010-09-24 18:35:54

ansaurus

tags:

views:

answers:

Problem displaying a CSS 'popup' properly.

related questions