Я пытаюсь обновить шаткое старое приложение ASP.NET Web Forms для работы в современных браузерах (наш магазин поддерживает его только в IE в течение многих лет).
Помимо других проблем, я не могу заставить GridView правильно отображаться в нескольких частях приложения. В частности, ширина заголовков столбцов задается неправильно, искажая всю сетку.
В IE сетка выглядит следующим образом:
Принимая во внимание, чтов Chrome, Firefox и т. д. я получаю следующее:
Обратите внимание на искаженный размер заголовка Account # и то, как ячейки ввода данных не совпадают с остальной частью столбца. заголовки (Название учетной записи, FY's ...)
Я считал, что это простая проблема CSS, но ни одно из внесенных мною изменений никак не повлияло на современные браузеры - они просто не отвечали, даже когда я пытался редактировать встроенные стили в проводнике DOM.
Как ни странно, заголовки столбцов получают атрибуты ItemStyle-Width и ItemStyle-CssClass в .aspx, но, похоже, они ненасколько я могу судить, отражается в сгенерированной разметке HTML.
Я вижу, что эти ячейки дают атрибуты "colSpan = '1'" и "rowSpan = '1'" в разметке в IE, а не в современных браузерах, поэтому кажется, что IE интерпретирует что. NET отправляет это по-другому (я полагаю, что это очевидно). Однако я не знаю точно, что означают эти атрибуты, поскольку я никогда не видел, чтобы они были написаны с использованием верблюжьей шкуры. Я также не могу найти / не понять, откуда эти атрибуты берутся в коде ... возможно, это просто что-то запечатленное в способе визуализации элемента управления, опять же.
Вот .aspx длявесь gridview на фото. Пожалуйста, дайте мне знать, если что-нибудь еще будет полезно.
<div id="dvByFund" style= "width: 100%;">
<asp:GridView
runat="server"
id="grdCashReceiptsByFund"
AutoGenerateColumns="False"
Width="100%"
RowStyle-CssClass="GridListItem"
AlternatingRowStyle-CssClass="GridListItemAlt"
HeaderStyle-CssClass="GridListItemAlt"
OnRowDataBound="grdCashReceiptsByFund_RowDataBound"
ShowFooter="True"
CellPadding="2"
>
<Columns>
<asp:TemplateField ItemStyle-CssClass="invisible" HeaderStyle-CssClass="invisible" FooterStyle-CssClass="invisible">
<ItemTemplate>
<asp:label runat="server" id="lblGovernmentalLevel" />
<asp:label runat="server" id="lblGovernmentalLevelDescription" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Account #" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFundNumber" Width="35px" CssClass="Normal" onblur="verifyFundExists(this);" MaxLength="3" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Account Title" ItemStyle-Width="230px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:Label runat="server" id="lblFundDescription" Width="210px" CssClass="ReadonlyLabelNoBorder" />
<asp:TextBox runat="server" id="txtFundDescription" CssClass="invisible" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Major<br /> Source" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtMajorSource" Width="35px" CssClass="Normal" MaxLength="2" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Source" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSource" Width="35px" CssClass="Normal" MaxLength="2" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Type" ItemStyle-Width="100px" FooterStyle-HorizontalAlign="Right" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:DropDownList id="ddlAppropriationType" CssClass="Normal" runat="server" DataValueField="key" DataTextField="value" onchange="formChanged=true;" />
</ItemTemplate>
<FooterTemplate>
Totals:
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFirstSessionYear" total="dvFundFirstSessionYearTotal" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFirstSessionYearTotal" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSecondSessionYear" total="dvFundSecondSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundSecondSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtThirdSessionYear" total="dvFundThirdSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundThirdSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFourthSessionYear" total="dvFundFourthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFourthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFifthSessionYear" total="dvFundFifthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFifthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSixthSessionYear" total="dvFundSixthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundSixthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button id="btnAddByFundRow" runat="server" Text="Add Row" OnClientClick="addByFundRow(); return false;" class="CommandButton" />
</div>
CSS применяется к классу AmountCell:
.AmountCell
{
border: solid 1px silver;
}
И вот странная ошибка, которую я получаю, когда удаляю ItemStyle-Width иАтрибуты ItemSytle-CssClass из всех полей TemplateFields:
В основном ожидаемые результаты: это представление сетки выглядит одинаково во всех браузерах (выглядит так же, как в IE, при этом столбцы правильно выровнены сих заголовки).
Фактические результаты: IE выглядит нормально, Chrome / Firefox выглядит искаженным.
Я не лучший специалист по работе с веб-формами (по большому счету), поэтомуБуду признателен за любую оказанную помощь. Спасибо!
ОБНОВЛЕНИЕ: Поработав некоторое время с Dev Tools, я смог узнать, что сгенерированная разметка .html включает встроенный стиль для каждого элемента строки GridView:
style="display:block;"
Удаление этого встроенного стиля из элемента tr возвращает столбцы строки обратно в правильное выравнивание.
Проблема в том, что я до сих пор не знаю, как избавиться от этого в коде ... Похоже, что-то явно добавлено, а не просто добавлено в элемент управления asp.net.
Опять же, все понимание очень ценится!