モバイルjqueryの折りたたみ式のdivは、内部のdivにクリッピングない

モバイルjQueryのjquery.mobile-1.0rc2.min.js私は私が実装したGridViewのItemTemplateにを持っている4.0モバイルjqueryの折りたたみ式のdivは、内部のdivにクリッピングない

HTML 5 Asp.net 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>

出典

2011-11-10 Shoebob

CSSの調整を行うには、Firebugまたはその他のDOM検査ツールを使用して、ライブコードのCSSを表示するのがよい方法です。 Firebugでは、CSSをライブで調整し、レイアウトにどのような影響を与えるかを確認することもできます。

私は調整したい要素から始め、そのDOMツリーを上に移動して、その親の計算されたCSS値をチェックアウトします。

申し訳ありません私はASPの達人ではないので、私はページのコードを見ることなく、より具体的なヘルプを提供することはできません。

出典

2011-11-10 19:20:47 Jasper

ジャスパーしかし、エミュレータやデバイスを介して展開して表示するまでは、問題は表示されません。クロムで - ちょうどいいようです。コードに関しては、Jquery MobileのCSSにあります。 – Shoebob

モバイルjqueryの折りたたみ式のdivは、内部のdivにクリッピングない

答えて

関連する問題