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
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by KPooja

Dani AI

Generated

A reliable pattern is to remove the expanded combo from normal flow, measure the size it needs, and place that expanded element as an overlay so neighbors are overlapped instead of the page resizing. The thread already shows that taking the control out of flow and increasing its stacking order works; the gaps below provide a robust way to do that, handle viewport edges, and restore state cleanly.

Example workflow (measure → overlay → restore):

  • Create a hidden clone of the combo to get its natural width (scrollWidth) without affecting layout.
  • Compute the combo's absolute position via getBoundingClientRect() (or relative to a positioned ancestor).
  • Set the real element (or an overlay copy) to position: absolute (or append to body), set measured width in pixels, and bump z-index.
  • If the expanded width would overflow the viewport, shift its left position so it still overlaps neighbors but stays inside the window.
  • On blur / outside click / context-menu close, revert position/width and z-index.

Small implementation sketch:

// measure natural width
const clone = el.cloneNode(true);
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.whiteSpace = 'nowrap';
clone.style.width = 'auto';
document.body.appendChild(clone);
const needed = clone.scrollWidth;
document.body.removeChild(clone);

// position overlay using element rect
const rect = el.getBoundingClientRect();
el.style.position = 'absolute';
el.style.left = (rect.left + window.scrollX) + 'px';
el.style.top = (rect.top + window.scrollY) + 'px';
el.style.width = needed + 'px';
el.style.zIndex = ++topZ;

Troubleshooting notes: stacking-contexts can hide overlays (any transformed/opacity ancestor creates one); position:absolute is positioned relative to the nearest positioned ancestor — if that ancestor is a table cell you may prefer appending the overlay to body. Right-click handlers should preventDefault() if you suppress the browser menu. Also consider keyboard accessibility (contextmenu is not available to all users).

Further reading: MDN docs for CSS position (position), z-index (z-index), and element sizing (scrollWidth) (). This follows the same layering idea shown by and the z-index advice from while giving a safer measurement/placement approach for .

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 Member #334542

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.