Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Peter Meyland on Jul 15, 2008 01:07
open dhtmlx forum
Strange behavor with dhtmlxCombo in a DIV

First of all thanks for this great combo function

I have a big problem with dhtmlxCombo inside a DIV with scrollbars.

If I create a dhtmlxCombo inside a DIV with scroll bars then the text around the dhtmlCombo are moved when I scrolls inside the DIV, but the combo box are not.

To illustrate the problem try this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="da">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="2008-07-15 09:21:04">
<meta name="language" content="DA">
<meta name="revisit-after" content="1">
<meta name="author" content="Developed by Peter Meyland - www.meyland.dk">
<meta name="copyright" content="Peter Meyland">
<title>index</title>

<style type="text/css">
.divColCenter {
/* DColCenterWidth */ width: 100%;
/* DColCenterHeight */ height: 100px;
/* DColCenterOverflow */ overflow: auto;
/* DColCenterTextAlign */ text-align: left;
/* DColCenterFontType */ font-family : Verdana;
/* DColCenterBackgroundColor */ background-color: #cccccc;
/* DColCenterTextColor */ color: #000066;
}
.divSiteHeader {
/* DSiteHeaderWidth */ width: 100%;
/* DSiteHeaderHeight */ height: 50px;
/* DSiteHeaderOverflow */ overflow: visible;
/* DSiteHeaderTextAlign */ text-align: center;
/* DSiteHeaderFontSize */ font-size: 100%;
/* DSiteHeaderFontType */ font-family : Verdana;
/* DSiteHeaderBackgroundColor */ background-color: transparent;
/* DSiteHeaderTextColor */ color: #000066;
}
.divSiteFooter {
/* DSiteFooterWidth */ width: 100%;
/* DSiteFooterHeight */ height: 10px;
/* DSiteFooterOverflow */ overflow: visible;
/* DSiteFooterTextAlign */ text-align: center;
/* DSiteFooterFontSize */ font-size: 60%;
/* DSiteFooterFontType */ font-family : Verdana;
/* DSiteFooterBackgroundColor */ background-color: transparent;
/* DSiteFooterTextColor */ color: #000066;
}
.divSiteHeader p {
/* TagPSiteHeaderMargin */ margin: 0px;
/* TagPSiteHeaderFontSize */ font-size: 100%;
/* TagPSiteHeaderFontType */ font-family : Verdana;
}
.divSiteFooter p {
/* TagPSiteFooterMargin */ margin: 0px;
/* TagPSiteFooterFontSize */ font-size: 90%;
/* TagPSiteFooterFontType */ font-family : Verdana;
}
p {
/* TagPMargin */ margin: 0px;
/* TagPFontSize */ font-size: 90%;
/* TagPFontType */ font-family : Verdana;
}
td {
/* TagPMargin */ margin: 0px;
/* TagPFontSize */ font-size: 90%;
/* TagPFontType */ font-family : Verdana;
}
td p {
font-size: 100%
}
</style>
<link rel="stylesheet" type="text/css" href="http://localhost/test/dhtmlxcombo.css">
<script type="text/javascript" src="http://localhost/test/dhtmlxcommon.js"></script>
<script type="text/javascript" src="http://localhost/test/dhtmlxcombo.js"></script>
<script type="text/javascript">
window.dhx_globalImgPath="http://localhost/test/imgs/";
</script>
</head>

<body>
<div id="divSiteHeader" class="divSiteHeader"><p>Here we have the header</p></div>
<div id="divColCenter" class="divColCenter">
<h3>Create</h3>
<form name="formNewCustomer" action="/test/index.php" method="post" id="formNewCustomer">
<table style="margin: 0px; padding: 0px; border-width: 1px; border-style: dotted; border-color: blue;">
<tr>
<td valign="top" nowrap>ZIP Cocde:</td>
<td> </td>
<td nowrap colspan="3" align="left">
<select id="idfldf_zip" name="fldf_zip">
<option selected value="4200">4200</option>
<option value="4500">4500</option>
<option value="9999">9999</option>
</select>
</td>
</tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
<tr><td colspan=\"3\"> </td></tr>
</table>
</form>
</div>
<div id="divSiteFooter" class="divSiteFooter"><p>Here we have the footer</p></div>

<script type="text/javascript">
var myidfldf_zip = dhtmlXComboFromSelect('idfldf_zip');
/*myidfldf_zip.loadXML('http://localhost/test/ccb_xmlget.php?t=tblCustomers&f=f_zip');*/
myidfldf_zip.enableFilteringMode(true, 'http://localhost/test/ccb_xmlget.php?t=tblCustomers&f=f_zip', true, true);
myidfldf_zip.setComboText('4200');
myidfldf_zip.setComboValue('4200');
</script>

</body>
</html>
Answer posted by Support on Jul 15, 2008 03:13
This is known positioning bug in IE, to fix issue, add position:relative style to scrollable DIV

.divColCenter {
/* DColCenterWidth */ width: 100%;
/* DColCenterHeight */ height: 100px;
/* DColCenterOverflow */ overflow: auto;
    position:relative; //<= this will fix issue
Answer posted by Peter on Jul 15, 2008 03:40
Thanks, now it works