将TextBox垂直对齐到GridView行

时间:2015-09-24 13:13:22

标签: c# html css asp.net gridview

我有一个GridView,里面有几个字段,这里是代码:

<asp:GridView ID="GW" runat="server" AutoGenerateColumns="False" CellPadding="0" ForeColor="#333333" GridLines="None" Width="100%" OnRowDataBound="GW_RowDataBound">
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <Columns>
                                <asp:BoundField DataField="df1" HeaderText="" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:d}" HeaderStyle-CssClass="hideGridColumn" ItemStyle-CssClass="hideGridColumn">
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                </asp:BoundField>
                                <asp:BoundField DataField="df2" HeaderText="" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:d}" HeaderStyle-CssClass="hideGridColumn" ItemStyle-CssClass="hideGridColumn">
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                </asp:BoundField>
                                <asp:BoundField DataField="df3" HeaderText="Activity" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:d}">
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                </asp:BoundField>
                                <asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                    <ItemTemplate>
                                        <asp:RadioButtonList ID="BlOption" RepeatDirection="Horizontal" OnSelectedIndexChanged="Rating_SelectedIndexChanged" AutoPostBack="true" runat="server" Width="50px" HeaderText="" RepeatLayout="Table">
                                            <asp:ListItem Value="0">0</asp:ListItem>
                                            <asp:ListItem Value="1">1</asp:ListItem>
                                            <asp:ListItem Value="2">2</asp:ListItem>
                                            <asp:ListItem Value="3">3</asp:ListItem>
                                            <asp:ListItem Value="4">4</asp:ListItem>
                                            <asp:ListItem Value="5">5</asp:ListItem>
                                        </asp:RadioButtonList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Comment" ItemStyle-VerticalAlign="Bottom">
                                    <ItemTemplate>
                                        <asp:TextBox ID="tbComment"  runat="server" AutoPostBack="true" OnTextChanged="Comment_SelectedIndexChanged" ></asp:TextBox>
                                    </ItemTemplate>
                                </asp:TemplateField>

                            </Columns>
                        </asp:GridView>

问题是TextBox tbComment,它粘在行的顶部。我尝试将 ItemStyle-VerticalAlign 属性设置为中间底部,但TextBox卡在行的顶部。

以下是它的外观: enter image description here

你能告诉我我做错了什么吗? 谢谢!

1 个答案:

答案 0 :(得分:2)

尝试这种方式:

<asp:TemplateField HeaderText="Comment" >
        <ItemTemplate>
            <asp:TextBox ID="tbComment"  runat="server" AutoPostBack="true" OnTextChanged="Comment_SelectedIndexChanged" ></asp:TextBox>
        </ItemTemplate>
           <ItemStyle  VerticalAlign="Bottom" />
</asp:TemplateField>

并检查页面中是否有可以与表格样式交互的css文件。尝试删除它。

我有类似的问题,但是当我将itemstyle设置为

<ItemStyle VerticalAlign="Bottom"  />

我解决了。

你可以像这样定义一个vertical-align的样式

.mystyle
{vertical-align:bottom;}

并在需要时以这种方式使用

<asp:TemplateField HeaderText="Comment" >
        <ItemTemplate>
            <asp:TextBox ID="tbComment"  runat="server" AutoPostBack="true" OnTextChanged="Comment_SelectedIndexChanged" ></asp:TextBox>
        </ItemTemplate>
           <ItemStyle  CssClass="mystyle" />
</asp:TemplateField>