Question

我已经基于这篇文章实现了响应式网格 How to add responsive behaviour to the asp:GridView 它运作良好，但在桌面和移动游猎中存在一些渲染问题。

我知道我可能会错过像供应商前缀这样的微不足道的东西。任何帮助将不胜感激。

.chargeWidth {
  width: 50% !important;
}

@media only screen and (min-width : 1025px) {
    .filter-margin {
    padding-bottom: 0px;
  }

/*used to either show or hide column header and item template data from 
gridview (sp)*/

  .showHideDesktopCharges {
    display: block;
  }

  .showHideMobileCharges {
    display: none !important;
  }
}


/***
For tablets and phones
***/
@media (max-width:979px) {

.filter-margin {
    padding-bottom: 20px;
}

#invoiceHeader {
    display: none;
}

#btnPayInvoice {
    height: 40px;
    width: 100%;
}

/*used to either show or hide column header and item template data from 
gridview (sp)*/
.showHideDesktopCharges {
    display: none !important;
}

.showHideMobileCharges {
    display: block;
}
.space::after {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    white-space: pre;
}

/* Force gridview to not be like gridview anymore */
.no-more-gridView table {
    /*width: 100% !important;*/
    /*border: 23px solid #ff0000;*/
    margin-right: 5px;
    max-width: none;
    width: auto;
    min-width: 100%;
}

.no-more-gridView table,
.no-more-gridView thead,
.no-more-gridView tbody,
.no-more-gridView th,
.no-more-gridView td,
.no-more-gridView tr {
    display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */
.no-more-gridView .table_column_head {
    display: none;
}

.no-more-gridView tr {
    all: revert;
    /*border: 3px solid #eee;*/
    height: auto !important;
    margin: 5px;

    border-bottom: 1px solid black;
}

.no-more-gridView td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    padding-bottom: 1em;
}

.no-more-gridView td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
}

 /*
 Label the data
 */
 .no-more-gridView td:before {
    content: attr(data-title);
 }
}



/***
For tablets and phones
***/
@media (max-width:1200px) {

.no-more-gridView-family-members table {
    /*width: 100% !important;*/
    /*border: 3px solid red;*/
    margin-right: 5px;
}
/* Force gridview to not be like gridview anymore */
.no-more-gridView-family-members table,
.no-more-gridView-family-members thead,
.no-more-gridView-family-members tbody,
.no-more-gridView-family-members th,
.no-more-gridView-family-members td,
.no-more-gridView-family-members tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.no-more-gridView-family-members .table_column_head {
    display: none;
}

.no-more-gridView-family-members tr {
    all: revert;
    border: 2px solid #eee;
    height: auto !important;
    margin: 5px;
}

.no-more-gridView-family-members td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    padding-bottom: 1em;
}

.no-more-gridView-family-members td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
}

/*
Label the data
*/
.no-more-gridView-family-members td:before {
    content: attr(data-title);
}
}


@media only screen and (max-device-width: 480px) and (orientation:landscape) 
{
    /* iPhone landscape */

}

@media only screen and (max-device-width: 480px) and (orientation:portrait) 
{
    /* iPhone portrait */
}

@media screen and (min-width: 320px) and (max-width: 767px) and 
(orientation: landscape) { /*)*/
/*Orientation Lock*/
/*html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}*/
}

继承人如何在Chrome中呈现

继承人如何在野生动物园中呈现

<section class="no-more-gridView">
    <asp:GridView ID="grdInvoices" CellPadding="8" CellSpacing="0" runat="server" DataKeyNames="InvoiceID" ForeColor="#333333" GridLines="None" ShowHeader="true" class="table table-striped table-bordered" Width="100%" AutoGenerateColumns="false" OnRowDataBound="grdInvoices_Item_Bound" data-show-toggle="true">
        <HeaderStyle CssClass="table_column_head " />
        <EmptyDataTemplate>
            <h4 class="text-success">No outstanding invoices found</h4>

        </EmptyDataTemplate>
        <Columns>
            <asp:TemplateField HeaderStyle-CssClass="showHideDesktopCharges span1" HeaderText="Charges">
                <ItemStyle CssClass="showHideDesktopCharges span1" />
                <ItemTemplate>
                    <img alt="view charges" style="cursor: pointer" src="../../images/plus16.png" />
                    <asp:Panel ID="pnlCharges" CssClass="showHideDesktopCharges" runat="server" Style="display: none;">
                        <asp:GridView ID="gvCharges" OnRowDataBound="gvCharges_Item_Bound" CssClass=" showHideDesktopCharges table table-striped table-bordered width:100%; column-span:all;" Width="100%" runat="server" AutoGenerateColumns="false" ForeColor="#333333" GridLines="None" class="table table-striped table-bordered">
                            <%--OnRowDataBound="gvCharges_Item_Bound"--%>

                                <Columns>

                                    <asp:TemplateField HeaderText="Charge">
                                        <ItemStyle CssClass="span5" />
                                        <ItemTemplate>
                                            <asp:Label ID="lblCharge" runat="server" Text='<%# Bind("Charge") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Amount">
                                        <ItemStyle CssClass="span7" />
                                        <ItemTemplate>
                                            <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("Amount") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>

                                </Columns>
                        </asp:GridView>

                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="InvoiceID" HeaderText="Invoice#" />
            <asp:BoundField DataField="DueDate" HeaderText="Due" DataFormatString="{0:MMMM d, yyyy}" />
            <asp:BoundField DataField="Amount_Due" HeaderText="Amount Due" />
            <asp:BoundField DataField="MemberID" HeaderText="Member ID" />

            <asp:TemplateField HeaderText="Member">
                <ItemTemplate>
                    <asp:Label ID="lblMember" runat="server" Text='<%# Bind("Member") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Charges" HeaderStyle-CssClass="showHideMobileCharges">
                <ItemStyle CssClass="showHideMobileCharges" />
                <ItemTemplate>
                    <asp:Repeater ID="rptCharges" runat="server">
                        <ItemTemplate>

                            <%# Eval("Charge") %> -
                                <%# GetClubCurrencySymbol() %>
                                    <%# Eval("Amount") %>
                                        <br />
                        </ItemTemplate>
                    </asp:Repeater>

                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="">
                <ItemTemplate>
                    <asp:CheckBox ID="chkPay" Style="height: 15px; width: 15px;" AutoPostBack="true" Text="Pay" runat="server" OnCheckedChanged="chkPay_CheckedChanged"></asp:CheckBox>
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>
    </asp:GridView>
</section>

Safari上的响应式网格CSS问题

0 个答案: