Try clientWidth instead

Post #143,889

2/29/04 5:02:59 AM

2/29/04 5:19:56 AM

It'll cut off the long item in the drop down, but this seems to work:
(Well, in IE 6.0 it cuts it off. In Firefox .8, it creates the control at 100 wide, but sizes the drop down list to fit the longest item, and clientWidth returns that width, not the set width. So who is right? Ugh.)

\n<html>\n  <head><title>Test</title></head>\n  <body>\n    <form id='TestForm' name='TestForm'>\n      <select id='TestList' name='TestList'>\n        <option value='1'>Test Me #1</option>\n        <option value='2'>Test Me #2 - a long one</option>\n      </select>\n    </form>\n  </body>\n  <script>\n    document.getElementById("TestList").style.width = 100;\n    alert(document.getElementById("TestList").clientWidth);\n  </script>\n</html>\n

--
Chris Altmann

Edited by altmann Feb. 29, 2004, 05:07:44 AM EST

Edited by altmann Feb. 29, 2004, 05:19:56 AM EST

Expand All History

Post #143,895

by altmann

2/29/04 6:41:06 AM

or currentStyle and GetComputedStyle

And then suddenly it's 3:30 in the morning and you can't let go of the problem and come up with this:

\n<html>\n\t<head>\n\t\t<title>Test</title></head><body>\n\t\t<form id='TestForm' name='TestForm'>\n\t\t\t<select id='TestList' name='TestList'>\n\t\t\t\t<option value='1'>Test Me #1</option>\n\t\t\t\t<option value='2'>Test Me #2 - a long one</option>\n\t\t\t</select>\n\t\t</form>\n\t</body>\n\t<script>\n\t\tfunction displayWidths(desc, tlst) {\n\t\t\tisIE = document.all;\n\t\t\tif(isIE) {\n\t\t\t\ttlst_cs_width = tlst.currentStyle.width;\n\t\t\n\t\t\t} else {\n\t\t\t\ttlst_comp_width = document.defaultView.getComputedStyle(tlst, '').getPropertyValue("width");\n\t\t\t}\n\t\t\t\n\t\t\tresults = desc + "\\n" +\n\t\t\t\t\t"clientWidth = " + tlst.clientWidth + "\\n" +\n\t\t\t\t\t"style.width = " + tlst.style.width + "\\n";\n\t\t\tif(isIE) {\n\t\t\t\tresults += "currentStyle.width = " + tlst_cs_width + "\\n"; \n\t\t\t} else {\n\t\t\t\tresults += "ComputedStyle Width = " + tlst_comp_width + "\\n";\n\t\t\t}\n\t\t\talert(results);\n\t\t\treturn;\n\t\t}\n\t\t\t\t\n\t\ttlst = document.getElementById("TestList");\n\t\tdisplayWidths("Before", tlst);\n    \t        tlst.style.width = 100;\n\t\tdisplayWidths("Set to 100", tlst);\n\t</script>\n</html>\n

Apparently currentStyle (IE) and getComputedStyle (DOM) are the way to get style info that wasn't set inline. I'm not sure why Moz returns a shorter value than IE.

--
Chris Altmann

Post #143,911

by ChrisR

2/29/04 11:15:09 AM

Thank ye kind sir

That one's been nagging on me. Appreciate the help!

Welcome to IWETHEY!