input fields dont display the flashing cursor in firefox

i am using the aw grid (v2) in an ajax application. when you click a row in the grid, a div is created, absolutely positioned, is movable by draging its titlebar/statusbar, form elements are added etc. Probably havent explained it very well, see screenshot below for more info.

http://www.phpkb.com/grid_input_prob/example.png

In firefox 1.5+ when you move an input element in front of the grid and click into it, the flashing cursor does not appear. IE behaves properly (you get a flashing cursor).

I have taken the quckref\grid.htm sample from the examples folder and have positioned a div and input element in the middle of the grid.

In Firefox 1.5+ the input element gets focus, and you can type in it, but you dont get the flashing cursor.

http://www.phpkb.com/grid_input_prob/examples/quickref/grid.htm

In IE6 when you click into the input element you get the flashing cursor as expected.

Interestingly, if the grid loads without a horizontal or vertical scrollbar then firefox DOES show the flashing cursor. If you resize a column to make a scrollbar appear, and then click into the input field again, it no longer flashes.

eg - same grid, but does not scroll this time.
http://www.phpkb.com/grid_input_prob/examples/quickref/grid_noscroll.htm

Note - the only aw component i am using is the grid. Tabs and all other controls are my own code.

Any ideas? ive tried setting the z-index higher than 1000 for both the divs AND input elements but still no difference.

This is a very old Firefox bug - the text cursor (caret) disappears when the input box is positioned on top (or inside) the div with overflow:scroll or overflow:auto.

The only solution which I know - wrap the textbox in another div with overflow:visible. If someone knows other way to fix this problem, please let us know, this would help a lot!

Hey Alex,

how exactly do I have to wrap the textbox as a workaround for this bug?
I tried {div style="overflow: visible;"}{input type="text" name="test"}{/div} but there is still no cursor when the textbox is positioned above a div with scrolling enabled.

If anyone knows any other solutions or workarounds for this bug, please let us know, becuase this is quite a showstopper for me right now. (positioning the div relative as mnentioned at http://www.forum4designers.com/archive18-2005-6-257107.html did not work for me as well).

Please disregard my previous post - the wrapping div should have overflow:auto or scroll, not visible.

Here is the example where the text cursor disappears -

<div style="overflow:auto; width:100px; height:50px; margin-bottom:-50px"></div>
<input type="text"/>

And here it is visible again -
<div style="overflow:auto; width:100px; height:50px; margin-bottom:-50px"></div>
<div style="overflow:auto">
    <input type="text"/>
</div>

As far as I understand the bug is triggered by "overflow:auto" or "overflow:scroll" rules on the overlapping div below the input box and can be corrected by another div around the input box with "overflow:auto" or "overflow:scroll".

Thanks _a lot_ Alex, you saved my day!

Alex, you rock! That's exactly, what I was searching for! Thanks

THX!!

Doesn't work for me....

me either. been having this issue for a while now.
and another problem is that setting overflow:scroll brings scrollbars where i don't want them if it's in a popup style box.

Alex, Thanks.
Great. Works for me！

hey alex trouble here ! y tried doing the same in my inline popup but cant see for firefox 2.0.4..is not working for me .


can u give me some help

Thx Alex its great for me

Rajesh ranjan

Thanks

I have a 1 frame work screen in that upper i have a pop-up menu down i have a Text boxes if i am going to pop-up menu (onmouse over) Menu is coming But in the text box cursor is Blinking how to avoid that.

try inserting a value for the text box

<input type="text" value="&nbsp; or whatever" />