Link to home
Start Free TrialLog in
Avatar of ntrivett
ntrivett

asked on

how to Auto Resize / Move a control onFocus

I am using a grid to display several columns of data. In one of the columns I have a drop-down list. My problem is that the column is not wide enough to display the contents in the drop-down list.

I would therefore like to resize/move the drop-down when it gets focus (i wish to expand it to the left), and then return it to its original size/position when it loses focus.

I have tried wrapping the control in a div and set the positioning etc of the div to absolute to get the thing to move, but I am having difficulty writing script that actually works. Also, wrapping the control in a div (before I start messing with it's position etc) immediately causes the wrapped control to appear vertically indented (i.e. it no longer lines up with the rest of the controls on the row in question).

Can anyone suggest a neat pair of functions I can call via the onFocus/onBlur events that will achieve this goal?
ASKER CERTIFIED SOLUTION
Avatar of devic
devic
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ntrivett
ntrivett

ASKER

Many thanks! As a technique it works nicely!

But (isn't there always a but), all the sizes of all the controls on the web page in question have to be expressed in percentages (because the page has to be viewed using a variety of screen sizes), and the scripts don't seem to like "percentage" dimensions. Also, the column in question is next to the rightmost (and narrow) column of the table. As the technique extends the column to the right, it is unhelpful even though it works.

Unless it can be "adjusted" to suite this particular scenario I believe I will have to use a pop-up dialog window instead (which is not my preferred choice). Yet certainly a step in the right direction!
hi ntrivett,

It would be nice if you prepare an example and put it online or post here. Then I can check it again.

happy new year!