www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need help: I need to have a select overlap another component

  1. #1
    Join Date
    Oct 2005
    Posts
    36

    Need help: I need to have a select overlap another component

    I have a tight space requirement here the explaination then code sample. I have a row of inputs and a link with a select set in the between in a div. I need to allow multi selection on the select which is the problem. The select must be within the div and when in non-select state set to 1 when the user is to make a selection I expand the select to 10. This causes the div to expand and any thing under to move in kind. I need a way to allow the select to expnad with out moving expanding the parent div.

    <script >
    function expand(){
    mySelect.size=5;
    }

    function contract(){
    mySelect.size=1;
    }
    </script>
    </head>
    <body onload="testUtil();">
    <h1>Simple web App</h1>
    <div>
    <input type="text" value="Move without me"/>
    <select id='mySelect' style="position: relative;" size="1" onmouseover="expand()" onmouseout="contract()">
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    </select>
    <input type="text" value="Move without me"/>
    </div>
    <div>
    <p>Don't move me</p>
    </div>
    </body>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    A float left or right in an other div ?
    <style type="text/css">
    #mySelect{float:left;}
    </style>

  3. #3
    Join Date
    Oct 2005
    Posts
    36
    Thanks I'll try it

  4. #4
    Join Date
    Oct 2005
    Posts
    36
    Nope didn't do it, All float does is shift the other components to one side, I need theselect to overlay the other component. To for a moment move forward. I've done it by accident some times helps to remeber your mistake.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Use the CSS position: (absolute or relative, based on needs) and z-index to a positive value
    on the <select> tag or the <div> tag area that contains the selection list.

  6. #6
    Join Date
    Oct 2005
    Posts
    36
    Yes that did it thanks.

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