3.0.5

Alignment issue in DIV containing Combo

I have created a combo with DIV tag inside "<TD>" element. If the no of items in the combo exceeds 4, dropdown list is misbehaving in Internet Explorer 6.0 SP 1.

But in Firefox it is working fine.

Can anybody help me to solve this issue...
Ram
March 28,
Are you using AW 2.0.2? Can you post a code example which allows to reproduce this issue?
Alex (ActiveWidgets)
March 28,
Hi Alex,

First I thak you for your immediate response.

Yes. I am using AW 2.0.2 only. When you open my sample code, u can find one white box around the popup list when u drop down the combo. This is the actual root cause for the alignment issue. Sometimes, only the white box is displayed and the popup items appear outside the screen area. In my actual HTML, there are some more controls below the table in which the combo box is placed.

System Details:

Internet Explorer:
Version : 6.0.2800.1106 (SP1)
Client Strength: 128 bit
Product ID: 55736-579-6588582-04251

Operating System: Microsoft Windows 200 Professional Edition.

This is my sample HTML Code:

<HTML>
<HEAD>
<TITLE>Sample HTML</TITLE>
</HEAD>
<style>
#Combo1
{
width: 250px;
height: 22px;
}

#Combo1-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo2
{
width: 250px;
height: 22px;
}

#Combo2-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo3
{
width: 250px;
height: 22px;
}

#Combo3-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo4
{
width: 250px;
height: 22px;
}

#Combo4-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}
body.generalbodycolor
{
background-color: #000077;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
.XPBlueExTitle
{
color: #D6DFF5;
font: 15px Tahoma, Arial, Helvetica;
font-weight: bold;
}
.XPTitleBG
{ color: white;
font: 8pt Tahoma, Arial, Helvetica;
font-weight: bold;
}
td.labelsleft
{
FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 8pt;
COLOR: white;
FONT-WEIGHT: normal;
TEXT-ALIGN: left;
}
</style>
<link href="Styles/AW/aw.css" rel="stylesheet"></link>
<script src="JS/AW/aw.js"></script>
<script>
var objCombo1 = new AW.UI.Combo;
var objCombo2 = new AW.UI.Combo;
var objCombo3 = new AW.UI.Combo;
var objCombo4 = new AW.UI.Combo;
</script>
<BODY class="generalbodycolor">
<form action="submit" name="frmMB" method="POST">
<TABLE width="100%" cellpadding="0" cellspacing="0" style="margin-top:0;margin-left:0;margin-right:0;margin-bottom:0;" align="center">
<TR>
<TD height="15" width="50%" align="center" class="XPTitleBG">Current Template
</TD>
<TD width="50%" align="center" class="XPTitleBG">Reference Template
</TD>
</TR>
</Table>
<TABLE width="100%" cellpadding="0" border="1" cellspacing="0" align="center">
<TR>
<TD height="65" width="50%">
<Table width="100%" class="VisibleSectionGridWithBorder" height="63">
<tr>
<td class="labelsleft" width="25%">Context
</td>
<td width="75%">
<script>
document.write('<div id="Combo1" style="overflow:hidden"></div>');
objCombo1.setId("Combo1");
objCombo1.setItemText(["Item Text Template with more than 25 chars", "Item Text 2", "Item Text 3", "Item Text 4", "Item Text 5", "Item Text 6", "Item Text 7", "Item Text 8", "Item Text 9", "Item Text 10"]);
objCombo1.setItemCount(10);
objCombo1.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo1.refresh();
</script>
</td>
</tr>
<tr>
<td class="labelsleft" width="25%">Template
</td>
<td width="75%">
<script>
document.write('<div id="Combo2" style="overflow:hidden"></div>');
objCombo2.setId("Combo2");
objCombo2.setItemText(["Item Text Template with more than 25 chars", "Item Text Template with more than 25 chars 2", "Item Text Template with more than 25 chars 3", "Item Text Template with more than 25 chars 4", "Item Text Template with more than 25 chars 5", "Item Text Template with more than 25 chars 6", "Item Text Template with more than 25 chars 7", "Item Text Template with more than 25 chars 8", "Item Text Template with more than 25 chars 9", "Item Text Template with more than 25 chars 10"]);
objCombo2.setItemCount(10);
objCombo2.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo2.refresh();
</script>
</td>
</tr>
</table>
</TD>
<TD width="50%" class="XPTitleBG">
<Table width="100%" class="VisibleSectionGridWithBorder" height="63">
<tr>
<td class="labelsleft" width="25%">Context
</td>
<td width="75%"><script>
document.write('<div id="Combo3" style="overflow:hidden"></div>');
objCombo3.setId("Combo3");
objCombo3.setItemText(["Item Text 1", "Item Text 2", "Item Text 3", "Item Text 4", "Item Text 5", "Item Text 6", "Item Text 7", "Item Text 8", "Item Text 9", "Item Text 10"]);
objCombo3.setItemCount(10);
objCombo3.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo3.refresh();
</script>
</td>
</tr>
<tr>
<td class="labelsleft" width="25%">Template
</td>
<td width="75%">
<script>
document.write('<div id="Combo4" style="overflow:hidden"></div>');
objCombo4.setId("Combo4");
objCombo4.setItemText(["Item Text Template with more than 25 chars", "Item Text Template with more than 25 chars 2", "Item Text Template with more than 25 chars 3", "Item Text Template with more than 25 chars 4", "Item Text Template with more than 25 chars 5", "Item Text Template with more than 25 chars 6", "Item Text Template with more than 25 chars 7", "Item Text Template with more than 25 chars 8", "Item Text Template with more than 25 chars 9", "Item Text Template with more than 25 chars 10"]);
objCombo4.setItemCount(10);
objCombo4.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo4.refresh();
</script>
</td>
</tr>
</table>
</TD>
</TR>
</Table>
</form>
</Body>
</HTML>
Ram
March 29,
Sample HTML:

<HTML>
<HEAD>
<TITLE>Sample HTML</TITLE>
</HEAD>
<style>
#Combo1
{
width: 250px;
height: 22px;
}

#Combo1-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo2
{
width: 250px;
height: 22px;
}

#Combo2-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo3
{
width: 250px;
height: 22px;
}

#Combo3-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}

#Combo4
{
width: 250px;
height: 22px;
}

#Combo4-popup
{
width: 250px;
height: 44px;
border: 3px double #69f;
}
body.generalbodycolor
{
background-color: #000077;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
.XPBlueExTitle
{
color: #D6DFF5;
font: 15px Tahoma, Arial, Helvetica;
font-weight: bold;
}
.XPTitleBG
{ color: white;
font: 8pt Tahoma, Arial, Helvetica;
font-weight: bold;
}
td.labelsleft
{
FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 8pt;
COLOR: white;
FONT-WEIGHT: normal;
TEXT-ALIGN: left;
}
</style>
<link href="Styles/AW/aw.css" rel="stylesheet"></link>
<script src="JS/AW/aw.js"></script>
<script>
var objCombo1 = new AW.UI.Combo;
var objCombo2 = new AW.UI.Combo;
var objCombo3 = new AW.UI.Combo;
var objCombo4 = new AW.UI.Combo;
</script>
<BODY class="generalbodycolor">
<form action="submit" name="frmMB" method="POST">
<TABLE width="100%" cellpadding="0" cellspacing="0" style="margin-top:0;margin-left:0;margin-right:0;margin-bottom:0;" align="center">
<TR>
<TD height="15" width="50%" align="center" class="XPTitleBG">Current Template
</TD>
<TD width="50%" align="center" class="XPTitleBG">Reference Template
</TD>
</TR>
</Table>
<TABLE width="100%" cellpadding="0" border="1" cellspacing="0" align="center">
<TR>
<TD height="65" width="50%">
<Table width="100%" class="VisibleSectionGridWithBorder" height="63">
<tr>
<td class="labelsleft" width="25%">Context
</td>
<td width="75%">
<script>
document.write('<div id="Combo1" style="overflow:hidden"></div>');
objCombo1.setId("Combo1");
objCombo1.setItemText(["Item Text Template with more than 25 chars", "Item Text 2", "Item Text 3", "Item Text 4", "Item Text 5", "Item Text 6", "Item Text 7", "Item Text 8", "Item Text 9", "Item Text 10"]);
objCombo1.setItemCount(10);
objCombo1.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo1.refresh();
</script>
</td>
</tr>
<tr>
<td class="labelsleft" width="25%">Template
</td>
<td width="75%">
<script>
document.write('<div id="Combo2" style="overflow:hidden"></div>');
objCombo2.setId("Combo2");
objCombo2.setItemText(["Item Text Template with more than 25 chars", "Item Text Template with more than 25 chars 2", "Item Text Template with more than 25 chars 3", "Item Text Template with more than 25 chars 4", "Item Text Template with more than 25 chars 5", "Item Text Template with more than 25 chars 6", "Item Text Template with more than 25 chars 7", "Item Text Template with more than 25 chars 8", "Item Text Template with more than 25 chars 9", "Item Text Template with more than 25 chars 10"]);
objCombo2.setItemCount(10);
objCombo2.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo2.refresh();
</script>
</td>
</tr>
</table>
</TD>
<TD width="50%" class="XPTitleBG">
<Table width="100%" class="VisibleSectionGridWithBorder" height="63">
<tr>
<td class="labelsleft" width="25%">Context
</td>
<td width="75%"><script>
document.write('<div id="Combo3" style="overflow:hidden"></div>');
objCombo3.setId("Combo3");
objCombo3.setItemText(["Item Text 1", "Item Text 2", "Item Text 3", "Item Text 4", "Item Text 5", "Item Text 6", "Item Text 7", "Item Text 8", "Item Text 9", "Item Text 10"]);
objCombo3.setItemCount(10);
objCombo3.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo3.refresh();
</script>
</td>
</tr>
<tr>
<td class="labelsleft" width="25%">Template
</td>
<td width="75%">
<script>
document.write('<div id="Combo4" style="overflow:hidden"></div>');
objCombo4.setId("Combo4");
objCombo4.setItemText(["Item Text Template with more than 25 chars", "Item Text Template with more than 25 chars 2", "Item Text Template with more than 25 chars 3", "Item Text Template with more than 25 chars 4", "Item Text Template with more than 25 chars 5", "Item Text Template with more than 25 chars 6", "Item Text Template with more than 25 chars 7", "Item Text Template with more than 25 chars 8", "Item Text Template with more than 25 chars 9", "Item Text Template with more than 25 chars 10"]);
objCombo4.setItemCount(10);
objCombo4.getPopupTemplate().setStyle("height", (5) * 18 + 'px');
objCombo4.refresh();
</script>
</td>
</tr>
</table>
</TD>
</TR>
</Table>
</form>
</Body>
</HTML>
Ram
March 29,
Any clues...
Ram
March 30,
Alex,
Above sample code works fine if i open as file. But if i open from IIS URL, it is giving problem...
Ram
March 30,
Any clues...
Ram
April 2,

This topic is archived.

See also:


Back to support forum