Member Avatar for ivanichi

I want to make layout like this...(in attachment) please some one help me, the problem in z-index...i can't edit input text. thanks all.

gbfrz.JPG 14.51 KB
  • 2 Contributors
  • 4 Replies
  • 328 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ivanichi

Dani AI

Generated

A common cause of inputs becoming uneditable is an invisible layer sitting above them. In this thread 's suggestion to remove the extra scroll wrapper and rely on the main container’s native scrolling resolved the immediate symptom, as confirmed. The underlying reason is how browsers build stacking contexts and decide which element receives pointer and keyboard focus.

Stacking contexts are created by more than an explicit stacking value. Transforms, opacity, filters, certain layout modes and positioned elements can each form a context. When an overlay or wrapper lives in a higher context it will intercept clicks and focus even if it appears visually transparent, so inputs underneath seem “locked”.

Practical checklist to prevent and diagnose this kind of problem:

  • Inspect the DOM with developer tools and use the element highlighter to find any element physically covering the inputs.
  • Temporarily apply a semi‑transparent background to suspected overlays to reveal their bounds.
  • Test click-through behavior by briefly setting pointer-events: none; on the overlay; if inputs become interactive, the overlay was the blocker.
  • If an input must appear above a decoration, either move it into a higher stacking context or move the decoration in the DOM so stacking order is predictable. Avoid relying on negative stacking values for focusable controls.
  • Remember transforms and some CSS effects implicitly create new stacking contexts; remove or adjust them when troubleshooting.

These checks help keep form controls focusable and scrolling predictable across browsers. The fix applied in the thread is sound; the extra steps above reduce the chance of regressions when adding headers, overlays, or CSS effects later.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

Post your code or link to a test site.

Regards, Arkinder

Member Avatar for ivanichi

this link for demo :
this link for code :
you can see on line : 23, 33, 43, and 63, if i change in line 63 with z-index: 1;
i can edit text in columns but the scroll >> hidden,
whether there is a solution friends ?

Member Avatar for Arkinder

Why bother having an extra division to create a scroll bar? In your division with the id container , change overflow: hidden; to overflow: scroll; Then you won't need an extra division to create a scrollbar.


Regards, Arkinder

Member Avatar for ivanichi

Thanks Arkinder, problem solved...

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.