dcsimg
www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 47

Thread: fixed width select box Internet Explorer Problem

  1. #1
    Join Date
    Sep 2005
    Posts
    9

    fixed width select box Internet Explorer Problem

    IE doesn't expand the select box when you go past the fixed width.

    Is there any way to make it work. It seems to work fine in Firefox


    <select width="60" STYLE="width: 60px" name="Category1"><option value="null">code<?php for($i=0; $i<count($categories); $i++) { echo "<option value=$categories[$i]>$categories[$i] --> $descriptions[$i]"; } ?></select>

  2. #2
    Join Date
    Sep 2005
    Posts
    9

    Fixed

    I found a solution.

    I ended up resizing the select lists onclick and onblur.

    It works ok in IE and does not effect Firefox

    e.g.

    <html>

    <select width="70" style="width: 70px" name="test" onClick="document.form1.test.style.pixelWidth = 100;"
    onblur="document.form1.test.style.pixelWidth = 40;">
    <option value="1">111111111111111111
    <option value="2">2222222222
    <option value="3">3333333333333
    <option value="4">444
    </select>

    </html>

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    pixelWidth is a proprietary attribute. Use width instead.

    Code:
    onclick="document.form1.test.style.width = '100px';"
    onblur="document.form1.test.style.width = '40px';"
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  4. #4
    Join Date
    Jul 2007
    Posts
    8
    I tried all the sugestions here and it does't work!
    Did this work or is just now with Internet Explorer 7?

    I need a solution for the same problem!
    Anyone?

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  6. #6
    Join Date
    Jul 2007
    Posts
    8
    The html is the same but ok :

    <html>
    <select width="70" style="width: 70px" name="test" onClick="document.form1.test.style.pixelWidth = 100;"
    onblur="document.form1.test.style.pixelWidth = 40;">
    <option value="1">LINK1 LINK1 LINK1 LINK1 LINK1
    <option value="2">LINK2 LINK2 LINK2 LINK2 LINK2
    <option value="3">LINK3 LINK3 LINK3 LINK3 LINK3
    <option value="4">LINK4 LINK4 LINK4 LINK4 LINK4
    </select>
    </html>

    ...or...


    <select width="70" style="width: 70px" name="test" onclick="document.form1.test.style.width = '100px';"
    onblur="document.form1.test.style.width = '40px';"
    <option value="1">LINK1 LINK1 LINK1 LINK1 LINK1
    <option value="2">LINK2 LINK2 LINK2 LINK2 LINK2
    <option value="3">LINK3 LINK3 LINK3 LINK3 LINK3
    <option value="4">LINK4 LINK4 LINK4 LINK4 LINK4
    </select>
    </html>


    Can you help?! Thanks!

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by Jorge Fernandes
    onClick="document.form1.test.style.pixelWidth = 100;"
    onblur="document.form1.test.style.pixelWidth = 40;">
    Your select doesn't seem to be part of a form called 'form1'.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Try these two functions out:
    HTML Code:
    <script type="text/javascript">
    <!-- begin hiding
    function expandSELECT(sel) {
      sel.style.width = '';
    }
    
    
    function contractSELECT(sel) {
      sel.style.width = '100px';
    }
    // end hiding -->
    </script>
    
    <select multiple style="width: 100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);">
      <option></option>
    </select>

  9. #9
    Join Date
    Jul 2007
    Posts
    8
    When I click It the size expand! That's ok!
    But, then, it doesn't come back to the original size.
    How can we solve it?

  10. #10
    Join Date
    Jul 2007
    Posts
    8
    Well... my mistake! It come back to the original size!!!!

    But here's the problem.

    Using JavaScript expandSELECT and contractSELECT functions doesn't work on my project because de cell expands, and all the contents at the write of the cell moves to the right ((
    What I want is Firefox behave : we press, and the options shows with full description, but the select box remains with the same size.

  11. #11
    Join Date
    Jul 2007
    Posts
    8
    Quote Originally Posted by Logic Ali
    Your select doesn't seem to be part of a form called 'form1'.
    What part does it seems to be? Give me an example, please

  12. #12
    Join Date
    Feb 2006
    Posts
    198
    a slightly different js code will fix this problem:

    <script>
    function expand() {

    document.getElementById('my_select').style.width = '100px';
    }
    function contract() {
    document.getElementById('my_select').style.width = '40px';

    }
    </script>

    <select id="my_select" onfocus="expand();" onblur="collapse();>

    </select>

  13. #13
    Join Date
    Aug 2008
    Posts
    1

    select IE Fixed width Fix

    This can be fixed by using div/javascript:

    Copy this code to : dropdown_menu_hack.js

    function foo(px,py,pw,ph,baseElement,fid)
    {
    var win = document.getElementById(this.fid);
    }


    function dropdown_menu_hack(el)
    {
    if(el.runtimeStyle.behavior.toLowerCase()=="none"){return;}
    el.runtimeStyle.behavior="none";

    var ie5 = (document.namespaces==null);
    el.ondblclick = function(e)
    {
    window.event.returnValue=false;
    return false;
    }

    if(window.createPopup==null)
    {

    var fid = "dropdown_menu_hack_" + Date.parse(new Date());

    window.createPopup = function()
    {
    if(window.createPopup.frameWindow==null)
    {
    el.insertAdjacentHTML("AfterEnd","<iframe id='"+fid+"' name='"+fid+"' src='about:blank' frameborder='1' scrolling='no'></></iframe>");
    var f = document.frames[fid];
    f.document.open();
    f.document.write("<html><body></body></html>");
    f.document.close();
    f.fid = fid;


    var fwin = document.getElementById(fid);
    fwin.style.cssText="position:absolute;top:0;left:0;display:none;z-index:99999;";


    f.show = function(px,py,pw,ph,baseElement)
    {
    py = py + baseElement.getBoundingClientRect().top + Math.max( document.body.scrollTop, document.documentElement.scrollTop) ;
    px = px + baseElement.getBoundingClientRect().left + Math.max( document.body.scrollLeft, document.documentElement.scrollLeft) ;
    fwin.style.width = pw + "px";
    fwin.style.height = ph + "px";
    fwin.style.posLeft =px ;
    fwin.style.posTop = py ;
    fwin.style.display="block";
    }


    f_hide = function(e)
    {
    if(window.event && window.event.srcElement && window.event.srcElement.tagName && window.event.srcElement.tagName.toLowerCase()=="select"){return true;}
    fwin.style.display="none";
    }
    f.hide = f_hide;
    document.attachEvent("onclick",f_hide);
    document.attachEvent("onkeydown",f_hide);

    }
    return f;
    }
    }

    function showMenu()
    {

    function selectMenu(obj)
    {
    var o = document.createElement("option");
    o.value = obj.value;
    o.innerHTML = obj.innerHTML;
    while(el.options.length>0){el.options[0].removeNode(true);}
    el.appendChild(o);
    el.title = o.innerHTML;
    el.contentIndex = obj.selectedIndex ;
    el.menu.hide();
    }


    el.menu.show(0 , el.offsetHeight , 10, 10, el);
    var mb = el.menu.document.body;

    mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;text-aligbn:center;font-family:Verdana;font-size:12px;";
    var t = el.contentHTML;
    t = t.replace(/<select/gi,'<ul');
    t = t.replace(/<option/gi,'<li');
    t = t.replace(/<\/option/gi,'</li');
    t = t.replace(/<\/select/gi,'</ul');
    mb.innerHTML = t;


    el.select = mb.all.tags("ul")[0];
    el.select.style.cssText="list-style:none;margin:0;padding:0;";
    mb.options = el.select.getElementsByTagName("li");

    for(var i=0;i<mb.options.length;i++)
    {
    mb.options[i].selectedIndex = i;
    mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width/**/:100%;cursor:hand;cursorointer;white-space:nowrap;"
    mb.options[i].title =mb.options[i].innerHTML;
    mb.options[i].innerHTML ="<nobr>" + mb.options[i].innerHTML + "</nobr>";
    mb.options[i].onmouseover = function()
    {
    if( mb.options.selected ){mb.options.selected.style.background="white";mb.options.selected.style.color="black";}
    mb.options.selected = this;
    this.style.background="#333366";this.style.color="white";
    }

    mb.options[i].onmouseout = function(){this.style.background="white";this.style.color="black";}
    mb.options[i].onmousedown = function(){selectMenu(this); }
    mb.options[i].onkeydown = function(){selectMenu(this); }


    if(i == el.contentIndex)
    {
    mb.options[i].style.background="#333366";
    mb.options[i].style.color="white";
    mb.options.selected = mb.options[i];
    }
    }


    var mw = Math.max( ( el.select.offsetWidth + 22 ), el.offsetWidth + 22 );
    mw = Math.max( mw, ( mb.scrollWidth+22) );
    var mh = mb.options.length * 15 + 8 ;

    var mx = (ie5)?-3:0;
    var my = el.offsetHeight -2;
    var docH = document.documentElement.offsetHeight ;
    var bottomH = docH - el.getBoundingClientRect().bottom ;

    mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );

    if(( bottomH < mh) )
    {

    mh = Math.max( (bottomH - 12),10);
    if( mh <100 )
    {
    my = -100 ;

    }
    mh = Math.max(mh,100);
    }


    self.focus();

    el.menu.show( mx , my , mw, mh , el);
    sync=null;
    if(mb.options.selected)
    {
    mb.scrollTop = mb.options.selected.offsetTop;
    }




    window.onresize = function(){el.menu.hide()};
    }

    function switchMenu()
    {
    if(event.keyCode)
    {
    if(event.keyCode==40){ el.contentIndex++ ;}
    else if(event.keyCode==38){ el.contentIndex--; }
    }
    else if(event.wheelDelta )
    {
    if (event.wheelDelta >= 120)
    el.contentIndex++ ;
    else if (event.wheelDelta <= -120)
    el.contentIndex-- ;
    }else{return true;}




    if( el.contentIndex > (el.contentOptions.length-1) ){ el.contentIndex =0;}
    else if (el.contentIndex<0){el.contentIndex = el.contentOptions.length-1 ;}

    var o = document.createElement("option");
    o.value = el.contentOptions[el.contentIndex].value;
    o.innerHTML = el.contentOptions[el.contentIndex].text;
    while(el.options.length>0){el.options[0].removeNode(true);}
    el.appendChild(o);
    el.title = o.innerHTML;
    }

    if(dropdown_menu_hack.menu ==null)
    {
    dropdown_menu_hack.menu = window.createPopup();
    document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide);
    }
    el.menu = dropdown_menu_hack.menu ;
    el.contentOptions = new Array();
    el.contentIndex = el.selectedIndex;
    el.contentHTML = el.outerHTML;

    for(var i=0;i<el.options.length;i++)
    {
    el.contentOptions [el.contentOptions.length] =
    {
    "value": el.options[i].value,
    "text": el.options[i].innerHTML
    }

    if(!el.options[i].selected){el.options[i].removeNode(true);i--;};
    }


    el.onkeydown = switchMenu;
    el.onclick = showMenu;
    el.onmousewheel= switchMenu;

    }

    ------------------------------------------------------------

    After this in your html include the following code:

    <script language="JavaScript" src="/iws/scripts/search/dropdown_menu_hack.js"></script>

    <style type="text/css">
    #pri fieldset select{margin:14px;}
    #pri {margin-left:20px};
    .selectbox
    {
    behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0);
    }
    </style>


    now use it on any select as follows:
    <div id="pri">
    <select name="a" class="selectbox" style="width:162px;">
    <option>...
    ....
    </select>
    </div>

    Now you have the expanded select like Firefox in IE

  14. #14
    Join Date
    Mar 2009
    Posts
    1

    work around in IE7

    Hi Arun,

    your code working good in IE 6 and it seems not working in IE7.Could you please is any modifcations needed for IE7?

  15. #15
    Join Date
    Apr 2009
    Posts
    2

    Smile Make it compatible with IE7

    Hi karthikeyans ,


    Add below function to your ComboBox to make it compatible with IE7 and remove the style.


    Code:
     onfocus="window.dropdown_menu_hack(this)"

    Example:

    Code:
    <select name="a" style="width:200px" onfocus="window.dropdown_menu_hack(this)">
    <option>choose...</option>
    <option>when the menu has a short width set,</option>
    <option>text happily falls off the right edge of the menu</option>
    <option>other browsers are smart and pop up a widened menu</option>
    <option>but not Win IE...</option>
    </select>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles