在gridview的itemtemplate中移动Jquery可折叠div不裁剪内部div答案

【问题标题】：Mobile Jquery collapsible div within itemtemplate of gridview not clipping internal div在gridview的itemtemplate中移动Jquery可折叠div不裁剪内部div
【发布时间】：2011-11-10 19:06:40
【问题描述】：

移动 JQuery jquery.mobile-1.0rc2.min.js HTML 5 ASP.NET 4.0

我有一个 gridview 项目模板，我在其中实现了 JQuery Mobile 的可折叠 div。在 h3 中，我有另一个要剪辑的 div，因为标签文本可能很长（我不想换行）。使用我当前的设置，可折叠 div 将整个 gridview 扩展到屏幕边界之外。我已经在几个级别上尝试了一堆不同的 CSS 和内联样式，但就是无法弄清楚这一点。我敢肯定这是一个简单的修复别人的眼睛。

<!DOCTYPE html>
<html>
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">   </script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
  <link href="Styles/MB.css" rel="stylesheet" type="text/css" />
</head> 
<body>
  <form id="form1" runat="server">
    <div data-role="page">
      <div data-role="content" style="padding: 0px; margin: 0px; text-align: center">
        <asp:GridView ID="gvTechTickets" runat="server" DataKeyNames="CallNo" 
                DataSourceID="sqlDS_TechTickets" AutoGenerateColumns="False" 
                EmptyDataText="NO TICKETS FOR YOU!" Width="100%" AllowPaging="True" 
                ShowHeaderWhenEmpty="True">
          <AlternatingRowStyle BackColor="#F0F0F0" />
          <Columns>
          <asp:TemplateField HeaderText="YOUR OPEN TICKETS">
            <ItemTemplate>
              <div data-role="collapsible" data-theme="b" data-collapsed="True" style="width: 100%">
                <h3> 
                  <div>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("CallNo") %>'></asp:Label>
                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("Date") %>'></asp:Label>
                  </div>   
                  <div id="divTicketCustomerName">
                    <asp:Label ID="Label2" runat="server" style="font-weight: 700" Text='<%# Bind("Company") %>'></asp:Label>
                  </div>     
                  <asp:Label ID="Label3" runat="server" style="font-size: small; font-style: italic;" Text='<%# Bind("Problem") %>'></asp:Label>
                </h3>
                <p style="padding: 0px; margin: 0px; text-align: left; vertical-align: top">
                  <asp:Label ID="Label5" runat="server" style="font-size: small; font-style: italic;" Text='<%# Bind("Detail") %>'></asp:Label>
                </p>
              </div>
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
            <ItemStyle Wrap="True" />
          </asp:TemplateField>
          </Columns>
          <HeaderStyle BackColor="#FF9933" />
        </asp:GridView>
        <asp:SqlDataSource>.......</asp:SqlDataSource>
      </div><!-- /content -->
    </div><!-- /page -->
  </form>
</body>
</html>

【问题讨论】：

标签： gridview html jquery-mobile itemtemplate

【解决方案1】：

找出 CSS 调整的一个好方法是使用 Firebug 或其他一些 DOM 检查工具来查看实时代码的 CSS。在 Firebug 中，您还可以对 CSS 进行实时调整，看看它如何影响您的布局。

我从要调整的元素开始，然后在 DOM 树上检查其父元素的计算 CSS 值。

很抱歉，由于我不是 ASP 专家，所以在没有看到页面代码的情况下无法提供任何更具体的帮助。

【讨论】：

Jasper，这是一个想法，但是在我通过模拟器或设备部署和查看之前，我没有看到问题。在 chrome 中 - 似乎很好。至于代码，它在 Jquery Mobile css 中。