Changeset 33866


Ignore:
Timestamp:
2020-01-23T18:56:36+13:00 (4 years ago)
Author:
ak19
Message:

Dr Bainbridge's fix to Android mobile macronizer user (on Chrome 79.0.3945.116 running on Samsung S9 with Android 8.0.0; SM-G960U Build.R16NW) sent us a screenshot of text typed into the macronizer text area showing the textarea box obscuring the Add Macrons button. Investigating it showed that when text was typed, this text box enlarged. Although our tests in the chrome browser's responsive/mobile emulation (in web developer's tools) did not show the button itself going behind the text box but floating above it, the fix in this commit seems to prevent the box getting automatically enlarged when typing. The user can still manually expand the box by dragging its bottom right corner.

Location:
other-projects/the-macronizer/trunk/web/jsp
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • other-projects/the-macronizer/trunk/web/jsp/en/main.jsp

    r30594 r33866  
    2525        <%@page contentType="text/html" pageEncoding="UTF-8"%>
    2626        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     27
     28    <!-- Text area used to keep getting bigger when user started to type in it, but then also obscured the button underneath.
     29         The solution referring to a meta viewport tag with "maximum-scale" suggested below seemed to work when testing in browser:
     30         https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
     31         However, just setting the meta viewport tag with only initial-scale seems to work too:
     32         https://www.w3schools.com/css/css_rwd_viewport.asp
     33      -->
     34    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     35
    2736        <title>The Māori Macron Restoration Service</title>
    2837        <link href="../../css/css.css" rel="stylesheet" type="text/css" />

  • other-projects/the-macronizer/trunk/web/jsp/mi/main.jsp

    r30594 r33866  
    2525        <%@page contentType="text/html" pageEncoding="UTF-8"%>
    2626        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     27
     28    <!-- Text area used to keep getting bigger when user started to type in it, but then also obscured the button underneath.
     29         The solution referring to a meta viewport tag with "maximum-scale" suggested below seemed to work when testing in browser:
     30         https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
     31         However, just setting the meta viewport tag with only initial-scale seems to work too:
     32         https://www.w3schools.com/css/css_rwd_viewport.asp
     33      -->
     34    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     35
    2736        <title>The Māori Macron Restoration Service</title>
    2837        <link href="../../css/css.css" rel="stylesheet" type="text/css" />
Note: See TracChangeset for help on using the changeset viewer.