Member Avatar for KPooja

Hi All,

In our application we have combo boxes implementated using tables with fixed column width(fixed combo width).
and newly i have added a functionality for these combo box.
functionality is expand combo box on rightclick (using oncontextmenu) to fit to lengthy text.

oncontextmenu=function_call(object);

inside function:
obj.style.width="auto"

but the problem i am facing is, i have multiple combo boxes in row, so if i expand these combo box on right click , windo width is also adjusted accordingly i.e screen width is expanding.
Inturn i want to keep rest objects untouched and want to expand only the selected combobox and selected combo box must overlap adjecent combo, not expand the window size basiccaly.

let me know how can i achive this?

  • 3 Contributors
  • 3 Replies
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by KPooja

Recommended Answers

All 3 Replies

Member Avatar for fxm

box must overlap adjecent combo, not expand the window

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <style type="text/css">

    #box1 {
    width:400px;
    height:300px;
    background:#F00;
    position: absolute; left: 0in;
    }
    #box2 {
    width:400px;
    height:300px;
    background:#0F0;
    position: absolute; left: 3in;
    }
    #box3 {
    width:400px;
    height:300px;
    background:#00F;
    position: absolute; left: 6in;
    }
    </style>
    <script>
	zzTop = 3;
    </script>
    <title></title>
  </head>
  <body>
    <div id='box1' onclick="this.style.zIndex=zzTop++"></div>
    <div id='box2' onclick="this.style.zIndex=zzTop++"></div>
    <div id='box3' onclick="this.style.zIndex=zzTop++"></div>
  </body>
</html>

Click on a box to see this simple example work. Changing the width of a 'position:absolute' element increases or decreases the overlap.

Member Avatar for rajarajan2017

Set the basic zindex for combobox in your divs and use the javascript function to swapping the depth of zindex to the highest value while using your context menu.

Member Avatar for KPooja

I used position:absolute and zIndex in my implementation.It is working fine as expected.

Thanks you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.