javascript - dynamically match textbox width with gridview -
i trying dynamicly resize number of textboxes match gridviews tableheads width. gridview allways have same number of columns may vary in width. can see on image, width values doesn't match @ all.
the values comes from:
- black = width code
- red = width of textbox inspecting element (firefox)
- blue = width of tablehead inspecting element (firefox)

here's script & style:
<script type="text/javascript"> $(document).ready(function () { $("#<%= mygridview.clientid %> th").each(function (index) { $('input[type="text"]:eq(' + index + ')').css('width', $(this).width()); $('input[type="text"]:eq(' + index + ')').css('padding', '0'); $('input[type="text"]:eq(' + index + ')').val($(this).width()); }); }); </script> <style type="text/css"> input[type="text"] { margin: 0; } </style> as requested, asp code
<input type="text" id="id0"/><!-- comments needed rid of whitespace between text boxes --><input type="text" id="id1"/><!-- --><input type="text" id="id2"/><!-- --><input type="text" id="id3" /><!-- --><input type="text" id="id4" /><!-- --><input type="text" id="id5" /><!-- --><input type="text" id="id6" /> <br /> <asp:gridview id="mygridview" runat="server" headerstyle-cssclass="gridheader" pagerstyle-cssclass="gridpager" footerstyle-cssclass="gridfooter" alternatingrowstyle-cssclass ="gridaltitem" cssclass="grid" showfooter="true" autogeneratecolumns="false" allowsorting="true" datasourceid="mydatasource" onrowupdating="mygridview_rowupdating"> <columns> <asp:boundfield datafield="1" headertext="1" sortexpression="1" readonly="true" /> <asp:boundfield datafield="2" headertext="2" sortexpression="2" /> <asp:boundfield datafield="3" headertext="3" sortexpression="3" /> <asp:boundfield datafield="4" headertext="4" sortexpression="4" /> <asp:boundfield datafield="5" headertext="5" sortexpression="5" /> <asp:boundfield datafield="6" headertext="6" sortexpression="6" /> <asp:boundfield datafield="7" headertext="7" sortexpression="7" /> <asp:commandfield showeditbutton="true" /> <asp:commandfield showdeletebutton="true" /> </columns> <footerstyle cssclass="gridfooter"></footerstyle> <pagerstyle cssclass="gridpager"></pagerstyle> <headerstyle cssclass="gridheader"></headerstyle> <alternatingrowstyle cssclass="gridaltitem"></alternatingrowstyle> </asp:gridview>
i believe alone sufficient
input[type="text"] { margin: 0; width: 100%; }
Comments
Post a Comment