1

I have input elements in a table that have text in them but due to the size of a mobile screen, the width of each input is shorter than the text inside. I currently only see the first character of the input box. How can I allow the text in the input to spill outside of the input element?

.data{
   border:0;
   background: transparent;
   color: black;
   white-space: nowrap;
   overflow: visible;
   width: 33px;
}
<table>
<tr>
<td><input type='number' step='.01' class='form-control data' value='50'></td>
</tr>
</table>
Zachary Craig
  • 2,192
  • 4
  • 23
  • 34
jh95
  • 379
  • 2
  • 12
  • 4
    I don't think you can - inputs allow the text to be hidden as you can always type more text in than the length so it has to go somewhere. I may be wrong but you may be better off [using an editable div and use js to put that content into your input](https://stackoverflow.com/questions/7355583/can-div-with-contenteditable-true-be-passed-through-form), that way you can style it how you like (I think) – Pete Jul 20 '18 at 14:36
  • Are you able to increase the width of the inputs? – Joseph Webber Jul 20 '18 at 14:41
  • you can navigate an input box, so why you want an overflow? – Temani Afif Jul 20 '18 at 14:41
  • @TemaniAfif I want to use them to display data to users, but also allow them to change the text there. – jh95 Jul 20 '18 at 14:43
  • @JosephWebber I am not able to increase the size of the inputs any more because then it distorts the display on mobile. – jh95 Jul 20 '18 at 14:44
  • @jh95 perhaps you need to think about using a better responsive framework so that you are not limited to having inputs in a tiny column (eg with a framework like gridle or bootstrap, you can change the width of columns per device so instead of having all your inputs on one row, you can have each input and label taking up it's own row so you have the full width of the device) - if I came across a form that I could only see one letter of, I would definitely not be filling it in – Pete Jul 20 '18 at 15:10
  • @Pete I am using bootstrap 4, the problem is, the table has four columns and that's why I'm pressed for space. I think your editable div will work well for me. Do you by chance know how I can put text in front of the editable part? i.e. $50. The $ will always be there, but the user could change the number. – jh95 Jul 20 '18 at 15:13
  • 1
    @jh95 something like this https://www.bootply.com/OZ2GW9oDLC you start with four cols on a medium and up screen and then when you hit mobile, you go to each item on it's own row. Here is the same thing with an input group and dollar on the front of your input: https://www.bootply.com/1edKTD6UIZ – Pete Jul 20 '18 at 15:21
  • @Pete Great, thanks for the help! – jh95 Jul 20 '18 at 15:24
  • 1
    You're welcome, also see edit to above comment (added another link with the dollar bit) – Pete Jul 20 '18 at 15:24
  • @TemaniAfif You need to be able to have the font overflow if using a Nastaliq Arabic font, because it increases vertically as words get longer. See this problem: https://jsfiddle.net/9k3tnvpf/4/ Might anyone have a solution to this? – Adam D May 02 '19 at 20:27

0 Answers0