htmlcsswebgrid

How to set textbox width fit in table cell CSS

i am working with mvc webgrid which render table at run time. i want my text box width will be same as table cell width. each table cell has some with and when i set textbox width=100% then UI getting messed up. i use the below css

.edit-mode {
    width: 100%;
    display: inline;
}

so i am looking for help regarding css. here is the image of my grid. enter image description here

here is jsfiddle link where anyone can see my css and html code. https://jsfiddle.net/tridip/qvy0y8sk/

looking for guidance for css.

Solution

  • Add these to your input style:

    display: inline;
width: 100%;
height: 100%
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: none;  /* if you want no box around the input field */

    likewise in the td style of those inputs remove the padding spec