V-scroll H-expand div, ul list whitespace nowrap and IE

Hi,

Does anyone have a Javascript/CSS cure for the following IE symptoms that I
am witnessing with my DIV that scrolls vertically and grows horizontally to
cater for the largest <li> element/row?

I have had to introduce X.style.whitespace = "nowrap" to prevent the list
elements from wrapping over more than one line. That is, I want the <div> to
expand horizontally when a longer list element is obtained. You may recall
that I'm extending the div eastwards via the following command: -

if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}

(more details below)

Anyway, everything is peachy on FF but on IE ther are occasional
gaps/blank-lines in the list. If you scroll down the blank lines are there
and the highlighting shows that the particular list-item is taking up two
lines. If you scroll up on the other hand IE sort of sees the mistake and
moves everything up a line.

There doesn't appear to be any obvious rhyme nor reason for it, and the rows
involved in the breaks aren't the big rows but I'm at a loss as to what to
substitute for "Whitespace: nowrap" or a diffent way of extending my div
lengthways.

Hope this rings a bell with some body; please help if you can.

Cheers Richard Maher

function Tier3Suggest(
el,
divClass,
maxRows,
fetch,
singleton)
{
var lovTarget = el;

if (!lovTarget.id)
throw new Error('"id" attribute must be defined for element');

if (Tier3Suggest.LOV[lovTarget.id])
throw new Error("A list of values is already defined for this
element");

var currVintage = 0;
var lastSearch = "";
var dataFetch = fetch;
var singleton = singleton;
var lovMax = maxRows;
var targetStyle = getStyle(el);

var targetDiv = document.createElement("div");
targetDiv.className = divClass || lovTarget.className;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = "auto";
targetDiv.style.height = "auto";
targetDiv.style.overflowY = "auto";
targetDiv.style.overflowX = "hidden";
targetDiv.style.padding = targetStyle.padding;
// targetDiv.style.whiteSpace = "nowrap";

var dimTarget = lovTarget;
var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight;
var offsetLeft = dimTarget.offsetLeft;

while(dimTarget = dimTarget.offsetParent){
offsetTop += dimTarget.offsetTop;
offsetLeft += dimTarget.offsetLeft;
}

targetDiv.style.top = offsetTop + "px";
targetDiv.style.left = offsetLeft + "px";

document.body.appendChild(targetDiv);
var divStyle = getStyle(targetDiv);

var suggestList = document.createElement("ul");
suggestList.style.padding = "0px";
suggestList.style.margin = "0px";
suggestList.style.width = "auto";
suggestList.style.height = "auto";
// suggestList.style.whiteSpace
// = "nowrap";
suggestList.style.listStyleType
= "none";

var getLOV =
function()
{
var lovVintage = ++currVintage;
var rowCnt = 0;
return function(rowKey, rowData)
{
if (lovVintage != currVintage) {
return;
}
var listItem = document.createElement("li");
var listData = document.createTextNode(rowData);

listItem.appendChild(listData);
listItem._key = rowKey;
// listItem.style.width = listItem.clientWidth;
listItem.style.whiteSpace = "nowrap";

suggestList.appendChild(listItem);
rowCnt++;

if (rowCnt == lovMax) {
targetDiv.style.height = targetDiv.clientHeight + "px";
}

if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
targetDiv.style.visibility = "visible";
}
}

var keyHandler =
function()
{
if (lovTarget.value == lastSearch)
return;

lastSearch = lovTarget.value;

if (lovTarget.value.length == 0) {
targetDiv.style.visibility="hidden";
return;
}

targetDiv.style.height = "auto";
targetDiv.style.width = "auto";

while (suggestList.lastChild) {
suggestList.removeChild(suggestList.lastChild);
}

rowCallback = getLOV();
dataFetch.call(this, lovTarget, rowCallback);

};

listenerRegistry.checkIn(lovTarget,"keyup",keyHand ler);

var listHandler =
function(evt) {
var lclTarget = evt.target || evt.srcElement;
if (lclTarget.nodeType == 3)
lcltarget = lclTarget.parentNode;

if (lclTarget.tagName.toLowerCase() == "li") {
if (evt.type == "mouseover") {
lclTarget.style.color = divStyle.backgroundColor;
lclTarget.style.backgroundColor = divStyle.color;
}
if (evt.type == "mouseout") {
lclTarget.style.color = "";
lclTarget.style.backgroundColor = "";
}
if (evt.type == "click") {
alert("NV = *" + lclTarget.firstChild.nodeValue + "* l = " +
lclTarget.length);
singleton(lovTarget, lclTarget._key,
lclTarget.firstChild.nodeValue);
lovTarget.focus();
lovTarget.value = lovTarget.value;
}
}
}

listenerRegistry.checkIn(suggestList,"mouseover",l istHandler);
listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
listenerRegistry.checkIn(suggestList,"click", listHandler);

targetDiv.appendChild(suggestList);

Tier3Suggest.LOV[lovTarget.id] = this;

return this;
}

Tier3Suggest.LOV = {};

On Nov 7, 5:07*am, "Richard Maher" <maher... (AT) hotspamnotmail (DOT) com>
wrote:

Hi,

Does anyone have a Javascript/CSS cure for the following IE symptoms thatI
am witnessing with my DIV that scrolls vertically and grows horizontally to
cater for the largest <li> element/row?

I have had to introduce X.style.whitespace = "nowrap" to prevent the list
elements from wrapping over more than one line. That is, I want the <div>to
expand horizontally when a longer list element is obtained. You may recall
that I'm extending the div eastwards via the following command:

Give your list items a class and start with this rule:-

..mylistitem {
zoom:1
}

Put it in a separate sheet and wrap it in IE conditional comments.

Hi David,

"David Mark" <dmark.cinsoft (AT) gmail (DOT) com> wrote

Give your list items a class and start with this rule:-

.mylistitem {
zoom:1
}

I tried that but the width just blew-out big-time. I also found the "IE
whitespace Bug" posts and tried the various solutions such as "marginBottom
= "1px" and still no good :-(

I was about to replace the whitespace="nowrap" option by using \xA0
characters, to replace spaces embedded in my options, when I realized my
textNodes were being created with fixed char-length and space-filled
strings. (That's how the came down the Socket) The browser was quite rightly
not preserving the trailing spaces but them, combined with auto-width, a
growing container, (and perhaps a proportional font) left IE scratching its
head every now and then.

Anyway, cut a long story short, I trimmed the strings before creating the
textNodes for the list items and now everyone seems happy.

Thanks again for you help and interest.

Cheers Richard Maher

On Nov 7, 6:03*pm, "Richard Maher" <maher... (AT) hotspamnotmail (DOT) com>
wrote:

Hi David,

"David Mark" <dmark.cins... (AT) gmail (DOT) com> wrote in message

news:109b57df-a632-4fbd-903c-9b2126a4256b (AT) p36g2000vbn (DOT) googlegroups.com...

Give your list items a class and start with this rule:-

.mylistitem {
* *zoom:1
}

I tried that but the width just blew-out big-time.

Not sure what that means. But was hard to tell as I couldn't see your
markup and style sheets.

I also found the "IE
whitespace Bug" posts and tried the various solutions such as "marginBottom
= "1px" and still no good :-(

White space was my second thought, but careful with "solutions" found
on the Web.

I was about to replace the whitespace="nowrap" option by using \xA0
characters, to replace spaces embedded in my options, when I realized my
textNodes were being created with fixed char-length and space-filled
strings. (That's how the came down the Socket) The browser was quite rightly
not preserving the trailing spaces but them, combined with auto-width, a
growing container, (and perhaps a proportional font) left IE scratching its
head every now and then.

I was wondering about your markup at first, but saw you creating the
list items in script, appending text nodes, etc. Did not expect that
you were creating text nodes with unneeded white space.

IE it notorious for screwing up list rendering when extraneous white
space is present.

Anyway, cut a long story short, I trimmed the strings before creating the
textNodes for the list items and now everyone seems happy.

I figured it would work. Cross-browser road blocks are typically easy
to plow through. The trick is avoiding the temptation to give up and
go around them (e.g. use a browser sniffing script, switch to all
DIV's, etc.)

Thanks again for you help and interest.

No problem.