Member Avatar for adcgv

I have created a form on my site that appears distorted on older browsers with the text boxes shifted to the next line and to the right. I have used absolute positioning and spaces only for formatting. Moreover even in new browsers on zooming in, I get the same problem. Is there a way by which I can get a scrollbar to appear in the page on zoom in as I find on most sites. It doesn't happen on my site.

  • 3 Contributors
  • 4 Replies
  • 117 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Agarsia

Dani AI

Generated

Good troubleshooting so far — correctly pointed at relative sizing, and found the layout context was the real culprit. A few targeted fixes will stop inputs from wrapping under zoom and will let the browser add scrollbars when the viewport becomes smaller than your form.

A practical pattern that keeps the form fluid but forces horizontal scrolling when necessary is to wrap the form in a container with a sensible max-width and a min-width, and enable horizontal overflow. Use a layout method (flexbox or grid) for label/input alignment instead of spaces or absolute positioning.

/* wrapper: keeps a "page width" and allows horizontal scroll on small viewports */
.form-wrap {
  max-width: 960px;
  min-width: 700px;
  margin: 0 auto;
  overflow-x: auto;
  box-sizing: border-box;
}

/* form rows aligned with flexbox (fallback to vertical stacking on very old browsers) */
.form-row { display: flex; align-items: center; gap: 10px; }
.form-row label { flex: 0 0 140px; }
.form-row input { flex: 1 1 auto; min-width: 150px; box-sizing: border-box; }

Checklist and caveats:

  • Prefer semantic markup (form/label/input) and CSS for spacing. Avoid fixed pixel positioning or manual spaces in HTML.
  • overflow-x: auto on the wrapper forces a horizontal scrollbar when the wrapper is wider than the viewport; min-width makes that breakpoint controllable.
  • Use box-sizing: border-box to keep padding from breaking widths.
  • For older browsers that lack flexbox, use small fixed label widths with floated inputs as a graceful fallback.
  • Frames and framesets are obsolete and brittle; modern CSS layout is more reliable and accessible (see MDN notes on frames and overflow).

References: MDN on CSS overflow (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow), flexbox layout guide (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and frameset deprecation (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset).

Recommended Answers

All 4 Replies

Member Avatar for Agarsia

Hi,
when you zoom in the browser will only display an scrollbar if you use fixed widths and heights of the elements. If you use variable widths and heights like

#element {width: 80%;]

the browser will always display this element with an width of 80% of the parent div, which is for example the body-tag, so the element will always be 80% of the window's width.

Which old browsers?
If it's only Internet Explorer 6, than don't worry, you do not have to create a IE6-fixed stylesheet. Sites like Facebook or Youtube stopped optimizing their websites for Internet Explorer 6 too...
http://woorkup.com/2010/12/08/why-its-time-to-stop-optimizing-websites-for-ie6/

Member Avatar for Rajib Ganguly

Please fix the size of the form as width and height, so it will be looks nice.

Member Avatar for adcgv

Thanks Agarsia. You were right. I was using frames (frame1 20% & frame2 80%). This was causing problems. I was able to fix the same by replacing the frames with tables.

Member Avatar for Agarsia

ok :)
please mark this thread as 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.