Notes on HTML input size and textarea cols attribute large values resulting in mobile portrait mode horizontal clipping of form issue

Last updated on 11 April 2024

In my on-going Barebones Blogger Blog Feed to HTML Book program, I had decided to focus only on non-mobile usage (desktop/laptop/tablet) and designed and tested the program suitably. However, the program does load on mobile as well but its user interface has issues.

I decided to investigate the mobile portrait mode horizontal clipping of form issue that I am facing.

The above pic is a screenshot of the program running in portrait mode on my Samsung M21 mobile, and demonstrates the issue. Note that a horizontal scrollbar is not shown at the bottom and so the clipped areas of the form are inaccessible to the user.

If I remove the size attribute of the input fields and the cols attribute of the textarea field in the form then the horizontal clipping of form issue gets resolved but the field sizes are too small. Given below are pics of the main form which has the problem and a test form where size and cols attributes are removed. I have used Chrome DevTools Mobile simulator for this and also used a dark mode extension to clearly show the simulated mobile display edges.

Above pic: Main form clipped on Chrome DevTools mobile simulator

Above pic: Test form not clipped on Chrome DevTools mobile simulator for mobile display width of 375 pixels.

Note that the size of the input fields in the test form are too small.

I wanted to know the cause of the issue and now I know that. I don't think I should invest time in trying to solve the issue for mobile portrait mode display. Instead I should simply display a message that the screen/window width is too small for the program (use CSS media query for that perhaps?).

Update: Setting min-width to 550px brings in a horizontal scrollbar in mobile portrait mode in Chrome DevTools mobile simulation. But Chrome DevTools simulation seems to have some issues with switching to landscape mode as it magnifies the contents quite a bit at times, and does not do so at times. Need to check it on actual mobile (after commit to github and auto pickup and deploy by netlify). ... It seems to do a reasonable job but two issues: a) On Samsung M21 in portrait mode, the left margin is lost and there is no horizontal scrollbar. Pinch in to zoom out does not have any impact. ... So it is usable but not pretty. When I checked out on simulated mobile in Chrome DevTools (the netlify app), the left margin appears with a horizontal scrollbar. b) Switching from portrait to landscape mode on Samsung M21 does show the same issue of magnified contents and need for horizontal scroll but that disappears after some switching back and forth. Also one can pinch in the display (zoom out) to reduce the magnification after which the horizontal scrollbar disappears. I think I will now temporarily stop this CSS stuff and move on to other stuff that the barebones app needs to become a simple app (upgrade from barebones). end-Update.

An interesting article which provides a way to grow the size of the input field as user keys in text: Auto-Growing Inputs & Textareas. Check out the 'Resizing actual input elements' section for a live example of input field growing in size dynamically. This may be too sophisticated an approach for my current needs but I may find it useful in future perhaps.

=================

11 Apr. 2024 Update

I did some quick browsing and some experimentation to improve handling of this issue. Clearly, if I want to understand the standard way of handling these issues, I need to read up more on HTML form and associated CSS design, and there seem to be lots of templates available on the net which may be of great help.

As of now, to resolve the issue (described in this post), I think that input fields size attribute and textarea cols attribute should NOT be specified. Instead a width percentage should be specified for them through CSS. For example width: 100%. To make the input fields (and other fields in the form) grow or reduce in size based on window width, applying a width percentage to the form in CSS (e.g. width: 70%) seems to work well. To prevent the input fields (and other fields in the form) from becoming too long, a max-width in pixels can be specified for the form in CSS (e.g. max-width: 590px). Further, one can use media queries to increase form width percentage for small display widths (like mobile portrait). As an example, for media of max-width 375 px, I tested form width being set to 95% in CSS which seems to work well. Horizontal clipping of the form does NOT happen even in 375 px window width simulated mobile device (in Chrome DevTools), and the input fields take up large part of 375 px width but leaving a little margin & padding on left and right.