Мобильный Jquery разборный div внутри itemtemplate вида grid, не обрезая внутренний div - PullRequest
Новая
       31

Мобильный Jquery разборный div внутри itemtemplate вида grid, не обрезая внутренний div

1 голос
/ 10 ноября 2011

Мобильный JQuery jquery.mobile-1.0rc2.min.js HTML 5 Asp.net 4.0

У меня есть шаблон элемента gridview, в котором я реализовал разборный элемент div из JQuery Mobile. В h3 у меня есть еще один div, который я бы хотел обрезать, потому что текст метки может быть довольно длинным (я не хочу переносить). С моей текущей настройкой разборный элемент div расширяет весь вид сетки за границу экрана. Я пробовал несколько разных 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>

1 Ответ

0 голосов
/ 10 ноября 2011

Хороший метод для выяснения настроек CSS - использовать Firebug или какой-либо другой инструмент проверки DOM для просмотра CSS живого кода.В Firebug вы также можете вносить живые изменения в CSS и видеть, как это влияет на ваш макет.

Я начинаю с элемента, который хочу настроить, а затем поднимаюсь по дереву DOM, проверяя рассчитанные значения CSS для егородители.

Извините, я не могу предложить более конкретную помощь, не увидев код страницы, так как я не гуру ASP.

...