ARTICLE AD BOX
I have created a table with embedded text boxes and edited the HTML elements to fit the text and text boxes in a line in the cell. On web browser, it looks okay:
however it looks odd on mobile browser:
It only affects the first embedded text box. The HTML codes are identical as far as I know, as written in the excerpt below. How to rectify this problem?
below is a minimal reproducible code which kind of shows the problem
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td { border: 1px solid black; padding: 8px; } /* Simulates problematic REDCap field */ .textbox1 { display: block; width: 100%; } /* Simulates normal REDCap field */ .textbox2 { width: 60px; } </style> </head> <body> <table> <tbody> <!-- Problem case --> <tr> <td> <p style="display:inline-block; width:20%; margin:0;"> <input class="textbox1" type="text"> </p> hours per week </td> </tr> <!-- Working case --> <tr> <td> <p style="display:inline-block; width:20%; margin:0;"> <input class="textbox2" type="text"> </p> hours per week </td> </tr> </tbody> </table> </body> </html>![Android TalkBack Accessibility Issue – Unwanted Style Announcement [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)