ansaurus

Question

Answer 1

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 2010-10-20 18:07:06

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 2010-10-21 13:25:08

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 2010-10-21 13:27:27

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 2010-10-21 19:17:40

ansaurus

tags:

views:

answers:

Make overflow:hidden not to scroll

related questions