文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使我的网格视图适应100%的页面

问如何使我的网格视图适应100%的页面
EN

Stack Overflow用户

提问于 2013-06-27 17:00:55

回答 4查看 29.2K关注 0票数 3

如何使我的网格视图很好地适应屏幕。我添加了这个属性width=" 100%“i，但是我的网格视图仍然远远超出了我设置为100%的页眉宽度。

这是我第一次尝试的网格视图的源代码。

<asp:GridView ID="GWCase" runat="server"  Top="0%" Width="100%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>

我尝试使用css方法，如下所示

<ul id="assigngw">
<asp:GridView ID="GWCase" runat="server"  Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
    </ul>

Css代码：

#assigngw {
width:100%;
}

不幸的是，这两种方法都不起作用。

这是我的全部源代码。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link rel="stylesheet" href="css/style.css" type="text/css" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<ul id="assigngw">
    <asp:GridView ID="GWCase" runat="server" width="300px" Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
    </ul>


<br />
Case ID :
<asp:Label ID="lblCID" runat="server"></asp:Label>
&nbsp;is situation near
<asp:DropDownList ID="lblocation" runat="server" OnSelectedIndexChanged="lblocation_SelectedIndexChanged" AutoPostBack="True" DataTextField="location" DataValueField="location">
    <asp:ListItem>Select Location</asp:ListItem>
    <asp:ListItem>Bukit Batok NPC</asp:ListItem>
    <asp:ListItem>Bukit Panjang NPC</asp:ListItem>
    <asp:ListItem>Choa Chu Kang NPC</asp:ListItem>
    <asp:ListItem>Jurong West NPC</asp:ListItem>
    <asp:ListItem>Nanyang NPC</asp:ListItem>
    <asp:ListItem>Woodlands East NPC</asp:ListItem>
    <asp:ListItem>Woodlands West NPC</asp:ListItem>
    <asp:ListItem>Ang Mo Kio North NPC</asp:ListItem>
    <asp:ListItem>Ang Mo Kio South NPC</asp:ListItem>
    <asp:ListItem>Punggol NPC</asp:ListItem>
    <asp:ListItem>Hougang NPC</asp:ListItem>
    <asp:ListItem>Sembawang NPC</asp:ListItem>
    <asp:ListItem>Serangoon NPC</asp:ListItem>
    <asp:ListItem>Sengkang NPC</asp:ListItem>
    <asp:ListItem>Yishun North NPC</asp:ListItem>
    <asp:ListItem>Yishun South NPC</asp:ListItem>
    <asp:ListItem>Bedok North NPC</asp:ListItem>
    <asp:ListItem>Bedok South NPC</asp:ListItem>
    <asp:ListItem>Changi NPC</asp:ListItem>
    <asp:ListItem>Geylang NPC</asp:ListItem>
    <asp:ListItem>Marine Parade NPC</asp:ListItem>
    <asp:ListItem>Pasir Ris NPC</asp:ListItem>
    <asp:ListItem>Tampines NPC</asp:ListItem>
    <asp:ListItem>Bukit Merah West NPC</asp:ListItem>
    <asp:ListItem>Clementi NPC</asp:ListItem>
    <asp:ListItem>Queenstown NPC</asp:ListItem>
    <asp:ListItem>Jurong East NPC</asp:ListItem>
    <asp:ListItem>Bishan NPC</asp:ListItem>
    <asp:ListItem>Bukit Timah NPC</asp:ListItem>
    <asp:ListItem>Kampung Java NPC</asp:ListItem>
    <asp:ListItem>Orchard NPC</asp:ListItem>
    <asp:ListItem>Toa Payoh NPC</asp:ListItem>
    <asp:ListItem>Bukit Merah East NPC</asp:ListItem>
    <asp:ListItem>Rochor NPC</asp:ListItem>
    <asp:ListItem>Marina Bay NPC</asp:ListItem>
</asp:DropDownList>
<br />
<br />
The following case will be assigned to this selected officer&nbsp;
    <asp:DropDownList ID="DDLpolice" runat="server" DataTextField="dropdownpolice" DataValueField="dropdownpolice" OnSelectedIndexChanged ="DDLpolice_SelectedIndexChanged1" style="height: 22px"
    AppendDataBoundItems="true" AutoPostBack="True">
<asp:ListItem Value="-1">Select Officer</asp:ListItem>
    </asp:DropDownList>

asp.net

gridview

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-06-27 17:29:32

问题出在您的测试内容和垃圾文本。

添加：

#assigngw td {
  word-wrap:break-word;
}

这将允许每个单元格在不适合的长句子上断开，并将停止它增加网格视图的大小。

编辑

尝尝这个

.gridview {
    width: 100%; 
    word-wrap:break-word;
    table-layout: fixed;
}

这里的关键是table-layout: fixed;，因为它强制单元格适合表格，而不是扩展表格以适合单元格。

更新的jsFiddle

票数 7

Stack Overflow用户

发布于 2016-07-13 19:23:59

您还可以将网格视图放在div中，如下所示

<div style="width:100%;overflow:scroll;"> <i>your gridview here</i> </div>

这样，网格视图就不会超出页面宽度。但用户将在页面上垂直滚动以查看所有网格视图内容。

票数 3

Stack Overflow用户

发布于 2013-06-27 17:05:11

正是行中没有空格的长文本将网格向外推。如果想要断开文本，则需要将此样式属性word-wrap:break-word;添加到单元格。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17338904

复制

相似问题

问如何使我的网格视图适应100%的页面
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使我的网格视图适应100%的页面EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使我的网格视图适应100%的页面
EN