2013-08-01 3 views
1

Я пытаюсь динамически изменить размер текстовых полей так, чтобы они соответствовали ширине таблицы gridviews tableheads. У gridview всегда будет одинаковое количество столбцов, но они могут различаться по ширине. Как вы можете видеть на изображении, значения ширины не совпадают.динамически сопоставлять ширину текстового поля с gridview

Значение происходит от:

  • черной = ширины из кода
  • красных = ширина текстового поля путем проверки элемента (светлячок)
  • синих = ширина tablehead путем проверки элемента (Firefox)

black = width from code, red = width of textbox, blue = width of tablehead

Вот сценарий & стиль:

<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> 

В соответствии с просьбой, мой ASP код

<input type="text" id="id0"/><!-- Comments are needed to get 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> 

ответ

0

Я считаю, что это само по себе достаточно

input[type="text"] { 
    margin: 0; 
    width: 100%; 
} 
+0

Нету, никакой разницы =/ –

+0

вы пытались что после удаление кода jquery? ваши gridview 'th' и' td' имеют одинаковую ширину для одного столбца (могут различаться для разных cols)? – rps

+0

также попробуйте изменить селектор на '$ (" # "+ <% = myGridView.ClientID%> +" th ").' – rps

Смежные вопросы