CSS,HTML formatting in a form

Question

I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.

What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!

Here is the code.

<html>
<head>
    <script type="text/javascript">
    function ExposeList1() {
        var showstatus = document.getElementById('ScrollCountry').style.display;
        if (showstatus == 'none') {
            document.getElementById('ScrollCountry').style.display = "block";
        } else {
            document.getElementById('ScrollCountry').style.display = 'none';
        }
    }
    function ExposeList2() {
        var showstatus = document.getElementById('Scrollguests').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollguests').style.display = "block";
        } else {
            document.getElementById('Scrollguests').style.display = 'none';
        }
    }
    function ExposeList3() {
        var showstatus = document.getElementById('Scrollminprice').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollminprice').style.display = "block";
        } else {
            document.getElementById('Scrollminprice').style.display = 'none';
        }
    }
    function ExposeList4() {
        var showstatus = document.getElementById('Scrollmaxprice').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollmaxprice').style.display = "block";
        } else {
            document.getElementById('Scrollmaxprice').style.display = 'none';
        }
    }
</script>
</head>
<body>
    <form action="trying.php" method="post">
        <img src="original1.png" onmouseover="this.src='onhover1.png'"
            onmouseout="this.src='original1.png'" onclick="ExposeList1()">
        <div>
            <div id="ScrollCountry"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
                <input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
                <input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
                <input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
                <input type="checkbox" id="scb5" name="c5"
                    value="Turks &amp; Caicos">Turks &amp; Caicos<br>
                <br />
            </div>
        </div>



        <img src="original2.png" onmouseover="this.src='onhover2.png'"
            onmouseout="this.src='original2.png'" onclick="ExposeList2()">
        <div>
            <div id="Scrollguests"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
                <input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
                <input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
                <input type="checkbox" id="n4" name="n4" value="10">8 -
                10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
                <br />
            </div>
        </div>



        <img src="original3.png" onmouseover="this.src='onhover3.png'"
            onmouseout="this.src='original3.png'" onclick="ExposeList3()">
        <div>
            <div id="Scrollminprice"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="mn1" name="mn1" value="200">200<br>
                <input type="checkbox" id="mn2" name="mn2" value="300">300<br>
                <input type="checkbox" id="mn3" name="mn3" value="400">400<br>
                <input type="checkbox" id="mn4" name="mn4" value="500">500<br>
                <input type="checkbox" id="mn5" name="mn5" value="600">600<br>
                <br />
            </div>
        </div>
        <img src="original4.png" onmouseover="this.src='onhover4.png'"
            onmouseout="this.src='original4.png'" onclick="ExposeList4()">
        <div>
            <div id="Scrollmaxprice"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="mx1" name="mx1" value="600">600<br>
                <input type="checkbox" id="mx2" name="mx2" value="700">700<br>
                <input type="checkbox" id="mx3" name="mx3" value="800">800<br>
                <input type="checkbox" id="mx4" name="mx4" value="900">900<br>
                <input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
            </div>
        </div>
        <input type="submit" />
    </form>
</body>
</html>

bperson · Accepted Answer · 2012-08-26 16:42:36Z

1

You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.

answered Aug 26, 2012 at 16:42

bperson

1,34510 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikdor · Accepted Answer · 2012-08-26 16:55:02Z

0

Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.

Modified version here at jsfiddle.

edited Aug 26, 2012 at 16:55

answered Aug 26, 2012 at 16:43

Vikdor

24.2k10 gold badges66 silver badges86 bronze badges

Collectives™ on Stack Overflow

CSS,HTML formatting in a form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related