3.2.0
Forum Demo Guide API Store

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:

combo box scroll bar issue in Chrome -gil (11)
Issues with composite nested controls in subclassed objects Anthony (18)
Dropdown Control instead of Combo? Rob Francis (19)
Firefox 26 issue - Input and Combo box text cut off Dan B. (9)
Popup issue for Combo Box in IE6 Justin (9)
Combo box popup window larger than assigned value Rimfo (17)
Basic Knowledge Demo #3 Checkboxes and Two Combo lists (set and get values) G Cayman (13)
RC1 Example & Question: Combo in a grid column. Rob Francis (13)
Header and Cell data alignment issue Xay Moua (6)
Contribution: AW and Draggable DIVs Anthony (10)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us