search

camslice / StackLayout

A flexible width, component based CSS layout system
http://www.stacklayout.com
154 stars 13 forks source link

<select class="stackContent"> doesn't drop down on Firefox 3.6.12 / Mac #2

Open marick opened 13 years ago

marick commented 13 years ago

Complete Firefox version: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12

If you have a dropdown in a stackAuto div and class it stackContent, the dropdown doesn't drop down when you click on it. (It does sometimes flicker.) It does work if you surround the select with a div classed stackContent. Here's an example:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Critter4Us</title>
    <link type="text/css" rel="stylesheet" href="http://stacklayout.com/stacklayout.css">
</head>
<body>
<div id="page">
    <div class="stack">

        <!-- Works -->
        <div class="stackAuto">
            <div class="stackContent">
            <select name="species" class="species">
                <option selected="selected">Bovine</option>
                <option>Equine</option>
            </select>
                </div>
        </div>

        <!-- Drop down doesn't drop down"
             Both uncomment the below and comment out
             the working case to see the effect -->

        <!--
        <div class="stackAuto">
            <select name="species" class="species stackContent">
                <option selected="selected">Bovine</option>
                <option>Equine</option>
            </select>
        </div>

        -->

    </div>
</div>
</body>
</html>

Perhaps this is obvious to someone more clueful than me about CSS, but I think the documentation says somewhere that you can use a "stackContent" on any tag.

The code above works on Safari 5 and Chrome 12.

camslice commented 13 years ago

You seem to have found a legitimate bug here, thanks! I'll have to do some more testing on other form nodes and update the documentation.

I would not suggesting applying .stackContent to a form node though, because .stackContent nodes are designed to wrap content. It's true that you can use .stackContent on all the 'normal' content nodes like h1,2,3,4,5,6, p, ol, ul, etc. but in my way of thinking, form nodes should always be wrapped in a 'normal' content node, like a fieldset, p, li, dd, etc.

Also if you apply .stackContent to a form node it will adopt all the padding, margins, borders, etc that you're applying globally to .stackContent nodes.