I need to make an overlow td input field without changing its position or tds width using css and jquery

Question

I need to increase the input field when it is in focus, without increasing td.

Further, in both fields, you should stay in its actual place (look at the violin, it will), and not move up or down (which is caused by the absolute position).

This is my actual condition.

$('.Bemerkung').focus(function() { $(this).attr('size','30'); $(this).parent().css({'position':'absolute'}); $(this).css({'position':'absolute'}); }) $('.Bemerkung').blur(function() { $(this).attr('size','5'); $(this).removeAttr('style'); $(this).parent().removeAttr('style'); }) 

http://jsfiddle.net/kazuya88/dhy0dxyy/

Hope you can help me!

Answer 1

This is not too far from what you originally had:

 $('.Bemerkung').focus(function() { oldWidth = $(this).width(); $(this).attr('size','30'); $(this).css({'position':'relative'}); $(this).css({'margin-right':('-'+($(this).width()-oldWidth)+'px')}); }) $('.Bemerkung').blur(function() { $(this).attr('size','5'); $(this).removeAttr('style'); $(this).parent().removeAttr('style'); }) 

Update: I decided that I should add more explanation about what is going on here. This basically determines that the size before receiving focus, then increases the size and sets the correct field to the difference between the new size and the old size (thus, the rendering sees the same "width" in it as before focus). Position: relative - this is that the width of the element will not affect the width td (provided that the right edge is set to negative).

Answer 2

You can use transform: scale(1.2) to enlarge it, add transition and remove absolute declarations.

 $('.Bemerkung').focus(function() { $(this).css({ 'transition': 'transform 0.5s', 'transform': 'scale(1.2)' }); }); $('.Bemerkung').blur(function() { $(this).css({ 'transform': 'scale(1)' }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="weektimereg" class="recordlist" border=1 style="text-align:center;"> <tr> <th style="width:110px;">sample</th> <th style="width:110px;">sample2</th> </tr> <tr> <td> <input type=text size=3 name=abc value='03:00'></input> <input class='Bemerkung' type=text size=5 name=cde value='test'></input> </td> <td> <input type=text size=3 name=abc value='03:00'></input> <input class='Bemerkung' type=text size=5 name=cde value='test'></input> </td> </tr> <tr> <td> <input type=text size=3 name=abc value='03:00'></input> <input class='Bemerkung' type=text size=5 name=cde value='test'></input> </td> <td> <input type=text size=3 name=abc value='03:00'></input> <input class='Bemerkung' type=text size=5 name=cde value='test'></input> </td> </tr> </table> 

Answer 3

Try replacing javascript with strong CSS.

One thing I did was do td cell-align: left. that is the only real difference right now. The reason is that the movement in the transition to the absolute position is due to the fact that he is trying to align the elements in the center, but then the absolute elements are not measured or not centered.

Here is the CSS.

 table td{ position: relative; overflow: visible; text-align: left; } .Bemerkung:focus{ width: 196px; position: absolute; z-index: 10000; } 

Let me know if you need text-align: center, and I will look for another solution.