views:

37

answers:

1

I have a set of radio buttons inside a div which has a fixed height and overflow:hidden. Some of the radios get hidden because they would be naturally positioned outside the height of the containing div.

When a radio is selected, and that radio is outside the visible part of the div, the div gets scrolled.

What I want is to be able to lock the scrolling of the div, regardless the currently checked radio is visible or not. I don't want the div to scroll.

Instructions to reproduce:

In FF/IE:

  1. Click on a radio button
  2. Use up/down arrows

Here is the code: http://www.jsfiddle.net/kANKu/1/

<div style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">

<input type="radio" name="rad1"  value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello6" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello7" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello8" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello9" /><label for="hello9">hello9</label> <br />

</div>
A: 

This is indeed a very strange request you have here. I have absolutely no idea what you are trying to accomplish here. However here is your Solution:

Firefox scrolls the selected item into view, thats just a a build in behaviour. There is no specification or magic attribute for that or something. However you can do a little hack which i did in the example below:

You could play around with onkeydown events or onfocus and reset the scrol in javascript but that would be nonsense. Just place the elements that you don't want to get scrolled to inside the visible area. I did it on the top right. Then make it visibility:hidden et voilá. It will be selected on arrow down and the value etc will still be submittet (i tried it with wrapping an missing form tag around the whole thing and a submit button).

This is very ugly and in my understanding absolutely weird and stupid, but as I said i don't know what your goals are!

Here comes your updated code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
    <head>
        <title>Title of the document</title>
        <style type="text/css">
            #strangediv {
            position: relative;

            }

            #strangediv input.invisible {
            top: 0px;
            left: 0px;
            position: absolute;
            visibility: hidden;
            }
        </style>
    </head>
    <body>

        Try this in FF/IE

        <div id="strangediv" style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
            <div id="holder">
                <input type="radio" name="rad1"  value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello6" class="invisible" /><label for="hello6">hello6</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello7" class="invisible" /><label for="hello7">hello7</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello8" class="invisible" /><label for="hello8">hello8</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello9" class="invisible" /><label for="hello9">hello9</label> <br />
            </div>
        </div>

    </body>
</html>
Joe Hopfgartner
Thanks for your answer even in the case you think this is ugly and stupid, but, as you may have guessed this is part of a bigger control in which I will be moving things around. The fact that the browser automatically scrolls the div is breaking the UI positioning of things.
DanC
With this solution as is now, I am having trouble selecting the radio buttons that have the invisible class. Do you think it would be possible to have them somewhat hidden, but still be selected when using the up/down keys?(even if they are not visible?). And yes, from where this comes from isn't that ugly and stupid....
DanC
they ARE selected. i wrapped the whole thing into a form, put a different value in the buttons with invisible class, selected them by cursor and submittet.
Joe Hopfgartner