-1

I have an input field inside a td:

<td title="" style="" role="gridcell">
   <input type="text" readonly="true" value="some_long_string_comes_here" style="background-color:transparent;border:0px solid white;">
</td>

The length of the text is less than the length of td. It is OK at Firefox but at Internet Explorer 9 I can not see the whole text.

EDIT 1: Reason is that: there is no width - size - maxlenght etc. for input but input element's length is less than the text. At Firefox it is equal to text's length. I don't want to use any special attributes as like width.

EDIT 2: Here is the screen shot when I hover mouse to the input field at debug mode:

enter image description here

You can see only some_long_string_comes instead of some_long_string_comes_here

Any ideas?

Michail Michailidis
  • 11,792
  • 6
  • 63
  • 106
kamaci
  • 72,915
  • 69
  • 228
  • 366
  • there is size for input http://stackoverflow.com/questions/1480588/input-size-vs-width - why don't you add it (even with javascript) if that comes from the server? – Michail Michailidis Nov 06 '14 at 15:32
  • 1
    Please provide code that actually reproduces the problem. Omit the table structure unless it is essential to the problem. Describe what makes you think that “at Firefox it is equal to text's length”; browsers use a default width that does *not* depend on the length of the actual value. – Jukka K. Korpela Nov 06 '14 at 16:52
  • @MichailMichailidis why length of input is not equal to the content's length when I do not define width or size? It is not like that at FF? – kamaci Nov 07 '14 at 07:22
  • @JukkaK.Korpela I have edited my question, could you check it? – kamaci Nov 07 '14 at 07:31
  • It looks pretty much the same in Firefox, and this is to be expected, since the default width of an `input` box is about 20 characters. If you see something different in Firefox, then there must be some CSS settings not disclosed. – Jukka K. Korpela Nov 07 '14 at 07:39
  • @JukkaK.Korpela it seems that you are right. When I put a longer string at FF it is same. So it means that FF and IE has different default width? – kamaci Nov 07 '14 at 07:56
  • 1
    They both have a default width of 20 “average” characters, though they slightly differ in their idea of “average”, and they may use different default fonts. But what matters is that the width depends on the defaults, on style sheets, and on presence of some HTML attributes, *not* on the content. If you actually want the width to be the minimal width required by the content, you should reformulate your question. And then you will probably need to change the markup (e.g. to have the string as normal content and duplicated in a hidden field). – Jukka K. Korpela Nov 07 '14 at 08:26
  • @JukkaK.Korpela you should write it as answer. This is the reason. – kamaci Nov 07 '14 at 09:14
  • Each browser is different as @JukkaK.Korpela. could be many things! different fonts - different default width sizes for inputs! I usually have something like reset.css (I don't remember which one is the more recent) and things become more consistent. If a browser is old or different I detect it and put special rules for it. – Michail Michailidis Nov 07 '14 at 14:19
  • From what you write - you expect the input to take the size of the text which is not what happens..in any browser – Michail Michailidis Nov 07 '14 at 14:46

3 Answers3

0

if you mean that you cannot see the text in the input - what if you make your input bigger adding a size="" attribute or more preferably using css formatting on input by adding in your style:

<input style="width: 200px;"/>

Edit: you can resize the input using some autoresize plugin .. (there are for jquery/javascript and angularjs) This way the input will have exactly the size you want and then the td will become larger by making the corresponding table column width larger.

Community
  • 1
  • 1
Michail Michailidis
  • 11,792
  • 6
  • 63
  • 106
  • I do not want to use width. I want to detect the cause and fix it. – kamaci Nov 07 '14 at 07:30
  • could be many things! different fonts - different default width sizes for inputs - you are not giving enough information and you haven't made a jsfiddle that replicates the problem. Your question title omits IE9 and adds TD which is irrelevant.. I will make an edit – Michail Michailidis Nov 07 '14 at 14:21
0

you can use a span or another tag instead of input readonly="true" and put the rule style of td white-space: no-wrap

<td  style="white-space:no-wrap;" role="gridcell">
<span  style="background-color:transparent;border:0px solid white;"> somestring_comes_here</span>
</td>
Alessandro Marchisio
  • 535
  • 3
  • 11
  • why would he want to replace the input with span?? He probably makes it editable sometimes and is part of a form.. – Michail Michailidis Nov 06 '14 at 15:42
  • because with this way you read always all the text inline; you can add input tag with display:none and width: 100% and if it makes editable you can dynamically change display: inline and hide the span – Alessandro Marchisio Nov 06 '14 at 16:21
  • how will the span be editable? He will have to make it contenteditable="true" - since he has it as input probably it is because it is part of another view that will make it editable. I would stick with what the OP has given – Michail Michailidis Nov 06 '14 at 16:23
  • @AlessandroMarchisio I do not want to use span instead of div. – kamaci Nov 07 '14 at 07:29
0

The width of an <input type="text"> element is by default20 “average” characters. Browsers differ in their idea of “average”, and they may use different default fonts, so that widths of characters vary. But the rendering is not very different across popular browsers with their default settings

The width can be changed using the size attribute or by setting width in CSS. It does not depend on the content or on the width of the parent element (unless you set the input element’s width in a manner that creates such a dependency, using the % unit).

If you have some data that you wish to show to the user and also pass forward as form data, as readonly, then you get more flexibility if you separate these functions. Put the data as normal content, e.g. in a span element (to be able to style it) and separately into a hidden field:

<input type="hidden" value="some_long_string_comes_here" name="foo">
<span class="show">some_long_string_comes_here</span>

I have added a name attribute, since without it, the field does not give any contribution to the form data.

In this approach, the visible text appears as normal text by default.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • is the OP's question even an issue at IE9 compared to FF or other browsers?? I think this is how inputs behave in any browser.. right? It is not a mere difference of characters but a whole word missing. I have written about size and width in my answer and the OP said either they don't exist for input or he doesn't want to use it (e.g for width) Why this is more relevant to his answer?? Meh - Plus name is not needed in inputs for modern ajax-only form submission not even form tags are needed, although it is a good practice to have them – Michail Michailidis Nov 07 '14 at 14:48