DomAPI - Forum

	DaveM registered v3 wrote on Wednesday 12/3/03 at 1:53 PM (PST)
	Hi Darin, You have a great tool here but I just wish I could learn all the intricacies more quickly... I have encountered a problem with the dropdown portion of a combobox when it is embedded in a pagecontrol. The offset of the dropdown seems to be displaced by the height of the page tabs. No doubt, I am doing something wrong so I have included a trimmed example of the code that fails. Any help you (or any of the other great contributors) can provide would be very much appreciated. Dave <HTML> <HEAD> <TITLE>Dropdown with bad offset</TITLE> <STYLE type="text/css"> <!-- #mainBox { position: absolute; width: 300px; height: 300px; left: 0px; } --> { } </STYLE> <SCRIPT type="text/javascript" src="../src/core_c.js"></SCRIPT> <SCRIPT type="text/javascript"> core.loadUnit("pagecontrol"); core.loadUnit("combobox"); onload=function() { var mainBox = null; // define page template to populate later... var templatePage = '<DIV width="120"><FORM id="frm1" name="frm1" method="POST">'; templatePage += '<FIELDSET padding="2"><LEGEND>Bad offset test</LEGEND><TABLE border="0" cellspacing="3" width="100%">'; templatePage += '<TR><TD id="tdControl" width="100"/></TR></FIELDSET></FORM></DIV>'; mainBox = core.Elm('mainBox'); // create a page control in the main body of the window var pcMain=Pagecontrol({parent:mainBox, theme:null, x:0, y:0, h:mainBox.getH(), w:mainBox.getW(), name:'pcMain'}); pcMain.addPage('Page1'); // load template into page pcMain.pages[0].innerHTML=templatePage; // add a control into page var control=Combobox({parent:core.getElm("tdControl"),w:100}); control.dropDown.delimitedText("Line1,Line2,Line3"); }; </SCRIPT> </HEAD> <BODY> <DIV id="mainBox"/> </BODY> </HTML>

	pklein registered v4 wrote on Wednesday 12/3/03 at 2:10 PM (PST)
	I am not to good at code reading.. don't you have the example at a page we can reach ?

	DaveM registered v3 wrote on Wednesday 12/3/03 at 4:03 PM (PST)
	Sorry, this is behind a firewall and I can't make it available externally.

	DaveM registered v3 wrote on Thursday 12/4/03 at 8:54 AM (PST)
	I have managed to create temporary access to a page at the following location: http://64.252.130.69 Any suggestions would be appreciated. TIA - Dave

Darin Kadrioski registered v4 wrote on Thursday 12/4/03 at 7:25 PM (PST)

This was due to a bug in 3.x dealing with offsets. I have a workaround for you using hooks, but it requires you to change one line of code in coreutils.js

Around about line 120 in core.getTrueOffset() you should see this line

while(e && (e.style.position=="relative" || e.style.position=="absolute")){

Change it to read

while(e){

Now, in your source file, add this to the end of your onload event:

core.useElmHooks = true;
core.elmProto.regHook("show", showHook);

and add this next function to your file:

function showHook(e,args){
 if(e.domAPIObjType == "LISTBOX" && e.parent && e.parent.domAPIObjType == "COMBOBOX"){
 var x = core.isIE? -8: -16;
 var y = core.isIE? -24: -34;
 e.moveBy(x,y);
 }
};

What we are doing is registering a hook on the show() method. Whenever show() is called by any elms, our new showHook() method is called, passing in a pointer to the Elm that called it. We do a small filter to make sure we are dealing with the dropDown of a Combobox and then do a *really* hacky position correction.

The change we made in core.getTrueOffset() will account for the relative nesting in your code.

Hooks really come in handy for this sorta trickery ;)

Darin Kadrioski
support@domapi.com

	DaveM registered v3 wrote on Thursday 12/4/03 at 8:13 PM (PST)
	Darin, Thanks - I had started to look at hooks, but you're way ahead of me... That was just what I needed. However, I did change the x coordinate to -12 for IE (6.0.2800.1106.xpsp2.030422-1633). That lined up better with the left border of the edit control. I will see if I can work out anything more generic for the position change but I expect that 4.0 will make that moot. Dave

Main

Support

Dev Zone