Member Avatar for bradly.spicer

Hey,

I'm trying to make the form to the right actually clickable however it seems like something is in the way. Can anyone locate the issue?

Thanks!

  • 2 Contributors
  • 2 Replies
  • 92 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by bradly.spicer

Dani AI

Generated

was on the right track and ’s note about changing positioning is useful: those two clues typically mean an element is sitting on top of the form and intercepting clicks. The fastest way to confirm and fix it is a short diagnostic followed by one of three simple CSS fixes.

  • Open DevTools, use the element inspector and hover around the form area. If a different element highlights over the inputs, that element is the blocker.
  • In DevTools check computed styles for that element: position, z-index, pointer-events, transform/opacity (these create stacking contexts) and any widths/heights that let it cover the form.
  • Temporarily uncheck or delete the suspected element/style in the inspector to verify the form becomes clickable.

If the blocker is confirmed, try one of these safe fixes.

/* bring the form above nearby elements */
.form-wrapper {
  position: relative;
  z-index: 1000;
}
/* keep a visible overlay from stealing clicks (overlay stays visible but non-interactive) */
.overlay {
  pointer-events: none;
}
/* prevent a child from exceeding its parent and covering interactive areas */
.mid-content {
  max-width: 100%;
  box-sizing: border-box;
}

Caveats: pointer-events: none makes the element non-interactive (not suitable if that element needs clicks). If transforms, opacity < 1, or certain position rules are present, z-index behavior can be counterintuitive; see the MDN notes on stacking contexts and pointer handling for details (stacking context / z-index, pointer-events).

Recommended Answers

All 2 Replies

Member Avatar for Bachu

There are lot of issues

In container_24 you have given max-width: 980px;
but Mid_Content is a div inside of this div, For Mid_Content div you have given width: 1100px;

Why?

Give Mid_Content div width value with less than or equal to width of container_24 div

Member Avatar for bradly.spicer

Hey,

I believe I did those changes and it is still causing problems?

was position realtive

Edited by bradly.spicer
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.