Forum: Rails Spinoffs (closed, excessive spam) Scrollable div selectbox for auto complete

The scrollbar div i have shows accurately in IE7 but not at all in
IE6.
Any help on this will be appreciated. The link to the autocomplete is
http://wiki.script.aculo.us/scriptaculous/show/Aja...

have you styled it any?

Hi Brian:

This is the CSS i used. Please please help.

div.autocomplete {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #aca899;
  margin:0px;
  padding:0px;
  font-size:11px;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
  font-family:"Trebuchet MS", Arial, Times New Roman;
}
div.autocomplete ul li.selected {
  background-color: #d5e2f2;
}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

.combo /* look&fell of scriptaculous select box*/
{
  margin: 0px 5px 10px 0px;
  width : 20em;
  display : block;
  text-align:left;
  background: url('bg_select.png') right;
  background-repeat:no-repeat;
  height:18px;
  cursor: pointer;
  border:1px solid #aca899;
}

Hi maasolo,

I basicaly have a similar problem.

This problem is that the scroll area appears and when you go down the
list of options with your keyboard then the next options which are not
in view are not scrolled into view.

I have basically 100% the same CSS as you.

This seems to be quite a problem.

Do you know how to solve this or get around this even if I place the
results into something else?

I really appreciate anyones help.

On Nov 1, 2007 3:52 PM, Open individual <michaelschwaner@gmail.com> 
wrote:
>
> This seems to be quite a problem.
>
> Do you know how to solve this or get around this even if I place the
> results into something else?
>
> I really appreciate anyones help.
>
>

check out http://dev.rubyonrails.org/ticket/2513  but it's a little
old, so I would have thought the issue would have been fixed by now.

Thanks Brian,

Pitty as it seems not be resolved just yet.

Man this is frustrating.

I have managed atleast to get it going in IE 7 and Firefox.
Do you know how to get the drop down elements to scroll into view when
the user goes through with their keyboard?

Thanks for coming back to us.

Really appreciate it.

Thanks Brian for the update.

Do you know how to scroll the elements in the dropdown into view when
the keyboard is used to go through the elements?

I appreciate your help.

no, unfortunately i do not.  But there are others on the list more
knownlegable than I am, so if someone knows the answer I am sure they
will speak up.

Hi Brian and all:


How is max-height:200px; supported in IE6
as shown in the following CSS?

div.autocomplete {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #aca899;
  margin:0px;
  padding:0px;
  font-size:11px;
  text-align:left;
  max-height:200px;
  overflow:auto;


}

Hi maasolo and Brian.

I was wondering if anyone got the scroll into view working of a drop
down autocomplete in IE.

I have been stuck for quite a while.

Mike

Hi Brian and all:

In IE7 when the browser window is smaller than the form size a
vertical and horizontal scrollbar is displayed. How do i prevent this
from showing?

the question you should be asking is:

how do you hide them in IE7 while not messing up all the other 
browsers...

The explanation to that is long and convoluted and involves
conditional comments and/or/with a dedicated IE7 css file/section

However, the answer is easy and luckily for you i have a working
example readily handy because i use it in nearly everything...

  <!--[if lte IE 6]>
       <link rel="stylesheet" media="screen" type="text/css" 
href="css/ie6.css" >
  <![endif]-->
  <!--[if gt IE 6]>
       <link rel="stylesheet" media="screen" type="text/css" 
href="css/ie7.css" >
  <![endif]-->

in css/ie7.css put

#some.thing{
  overflow:hidden;
}

HTH, YMMV

Thanks Brian, i will try that.

maasolo wrote:
> Thanks Brian, i will try that.

Hi,

Did anyone get it working? I have tried it in Firefox also but doesnt 
seem to be working.

Any help would be highly appreciated.

Neha

Hello there

you can use <div style="height:200px; overflow:scroll">

Regards
Adil
http://www.successcodes.us