[Solved] Website pages crashed on mobile browser with CSS in ASP.Net

Question

RivickJo...

SOLVED CLOSED ACTIVE ANSWERED
User: RivickJoe
Posted: on Oct 06, 2023 11:16 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 798

when i run my hosted website in any desktop and laptop it is working perfectly and when i run the application on mobile phone any browser, it will load the website and will show first div elements(controls) and when it needs to go on next div then it was crash

this is my aspx page code. Please let me know why it was happening.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TV_BI.aspx.cs" Inherits="TV_BI.TV_BI" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap'); /*Font animation Link*/
        @import url('https://fonts.googleapis.com/css2?family=Play&display=swap'); /*Font animation Link*/

        /*CSS is for Design Chart of Master Sales Data*/
        .MastTo { width: 575px; height: 400px; border: 0px solid; margin: 5px; padding: 5px; display: inline-block; vertical-align: top; }

        /*This CSS is for Design Chart of Customer sales Data*/
        .CustTo { width: 575px; height: 400px; border: 0px solid; margin: 5px; padding: 5px; display: inline-block; vertical-align: top; }

        /*CSS is for first block of Label which is on left side show as Total OutStanding*/
        .tblock { width: 370px; height: 200px; margin: 5px; padding: 5px; display: inline-block; vertical-align: top; background-color: goldenrod; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

        /*CSS is for Second block of Label which is on right side show as Total Overdue*/
        .oblock { width: 370px; height: 200px; margin: 5px; padding: 5px; display: inline-block; vertical-align: top; background-color: goldenrod; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

        /*Css is for Giving Animation to The Image And Set The Image*/
        .animated-image-container { background-image: url(Image/Gandhar_Radiant_Image.PNG); width: 400px; height: 200px; display: inline-block; vertical-align: top; background-repeat: no-repeat; animation: pulse 2s infinite; background-size: cover; }

        /*Animation is Continue for Image Control*/
        @keyframes pulse {
            0%, 100% { transform: scale(1); }

            50% { transform: scale(1.1); }
        }

        /*This Css is for The Total OutStanding Amount */
        .toAmount { color: darkblue; font-size: 35px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }

        /*This Css is for The Total OverDue Amount */
        .toOverdue { color: darkred; font-size: 35px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }

        /*This is for animation of label control(Total OutStanding,Total OverDue)*/
        .bounce { width: 100%; margin: 2rem auto; display: inline-flex; justify-content: center; -webkit-box-reflect: below -20px linear-gradient(transparent, #211e1e2e); }

        .bounce span { display: inline-flex; color: #000000; font-family: "Play", sans-serif; animation: bounce 1s infinite; }

        @keyframes bounce {
            0%, 50%, 100% { transform: translateY(0); }

            25% { transform: translateY(-20px); }
        }
        /*label animation end Here(Total OutStanding,Total OverDue)*/

        /*CSS to Design GridView Table thead table color-profile GridView*/
        table { border-collapse: collapse; width: auto; height: auto; }

        /*Set The Table Header for the Table*/
        table th { color: white; background-color: orangered; padding: 8px; z-index: 1; top: 35px; position: sticky; }

        /*Set The Css for Table Data of Table*/
        table, th, td { border: 1px solid black; padding: 5px; }

        /*Set the row child color*/
        tr:nth-child(even) { background-color: #43e5e0; }

        /*will Change the row color on OnMouseHover*/
        tr:hover { background-color: #67a6f5; }

        /*Scrolable CSS*/
        .gridview-container { width: auto; height: 100%; position: absolute; overflow: auto; overflow-x: hidden; overflow-y: auto; }

        /*CSS form Blink color-profile Particular row */
        @keyframes blinking {
            0%, 100% { background-color: red; transform: scale(1); }

            50% { background-color: yellow; transform: scale(0.9); }
        }
        /*Show particular row for some seconds to Blink*/
        .blink { animation: blinking 3.5s infinite; }

        /*Auto typing Lable of Gridview*/
        .typewriter { justify-content: center; color: whitesmoke; text-align: center; position: sticky; top: 0; letter-spacing: .15em; z-index: 1; background-color: #e5533e; padding: 10px; width: 100%; }
        /*css for not display chart container because setting from javascript*/
        .chart-container { display: block; }
        /*css for not display gridview container because setting from javascript*/
        .gridview-container { display: none; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <%--Dynamically Generating Chart Based on OutStanding Amount and OverDue Amount --%>
        <div id="dashboard" class="chart-container" style="padding: 65px; width: auto; background: linear-gradient(45deg, color(a98-rgb 0.32 0.6 0.55 / 0.37), #a90e3766);">
            <div id="chartContainer" style="width: auto;">
                <div class="chart">
                    <div class="setlabel">
                        <%--Calculating The Total OutStanding Amount and show In Label in Block--%>
                        <div class="tblock">
                            <%--This Is For Only Show Animated Label--%>
                            <div class="bounce">
                                <b><span>
                                    <asp:Label ID="setTitleAmt" runat="server" CssClass="toAmount"></asp:Label>
                                </span></b>
                            </div>
                            <br />
                            <br />
                            <%--This Label Will Show OutPut as Total OutStanding By CalCulating--%>
                            <asp:Label ID="lblTotalAmount" runat="server" CssClass="toAmount" /><span style="color: darkblue; font-size: 35px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;">M</span>
                        </div>
                        <div class="animated-image-container">
                        </div>
                        <%--Calculating The Total OverDue Amount and show In Label in Block--%>
                        <div class="oblock">
                            <%--This Is For Only Show Animated Label--%>
                            <div class="bounce">
                                <b><span>
                                    <asp:Label ID="setTitlOut" runat="server" CssClass="toOverdue"></asp:Label>
                                </span></b>
                            </div>
                            <br />
                            <br />
                            <%--This Label Will Show OutPut as Total OverDue By CalCulating--%>
                            <asp:Label ID="lblOverDue" runat="server" CssClass="toOverdue" /><span style="color: darkred; font-size: 35px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;">M</span>
                        </div>
                    </div>

                    <div class="bothchart">
                        <%--Here,It Is a First Stacked Bar Chart MasterWise Outstanding Amount--%>
                        <div class="MastTo">
                            <b>
                                <asp:Label ID="setTitleforMaster" runat="server"></asp:Label>
                            </b>
                            <asp:Chart ID="MasterDataChart" runat="server" Height="400px" Width="575px" PaletteCustomColors="18, 35, 158; 214, 69, 80" Palette="None">
                                <Legends>
                                    <asp:Legend Alignment="Near" Docking="Top" IsTextAutoFit="False" Name="Sum of OUTAMT"
                                        LegendStyle="Row" />
                                    <asp:Legend Alignment="Near" Docking="Top" IsTextAutoFit="False" Name="Sum of Overdue"
                                        LegendStyle="Row" />
                                </Legends>
                                <Series>
                                    <asp:Series Name="Sum of OUTAMT" ChartType="StackedBar" IsXValueIndexed="True" />
                                    <asp:Series Name="Sum of Overdue" ChartType="StackedBar" IsXValueIndexed="True" />
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea BackColor="Transparent" Name="ChartArea1" Area3DStyle-WallWidth="20">
                                        <AxisX LineColor="Black">
                                            <MajorGrid LineColor="Transparent" />
                                        </AxisX>
                                        <AxisY LineColor="Black">
                                            <MajorGrid LineColor="Transparent" />
                                        </AxisY>
                                        <Area3DStyle Enable3D="true" LightStyle="Realistic"></Area3DStyle>
                                    </asp:ChartArea>
                                </ChartAreas>
                            </asp:Chart>
                        </div>

                        <%--Here,It Is a Second Stacked Bar Chart CustomerWise Outstanding Amount--%>
                        <div class="CustTo">
                            <b>
                                <asp:Label ID="setTitleforCustomer" runat="server"></asp:Label>
                            </b>
                            <asp:Chart ID="CustomerDataChart" runat="server" Height="400px" Width="575px" PaletteCustomColors="18, 35, 158; 214, 69, 80" Palette="None">
                                <Legends>
                                    <asp:Legend Alignment="Near" Docking="Top" IsTextAutoFit="False" Name="Sum of OUTAMT"
                                        LegendStyle="Row" />
                                    <asp:Legend Alignment="Near" Docking="Top" IsTextAutoFit="False" Name="Sum of Overdue"
                                        LegendStyle="Row" />
                                </Legends>
                                <Series>
                                    <asp:Series Name="Sum of OUTAMT" ChartType="StackedBar" IsXValueIndexed="True" />
                                    <asp:Series Name="Sum of Overdue" ChartType="StackedBar" IsXValueIndexed="True" />
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea BackColor="Transparent" Name="ChartArea2" Area3DStyle-WallWidth="20">
                                        <AxisX LineColor="Black">
                                            <MajorGrid LineColor="Transparent" />
                                        </AxisX>
                                        <AxisY LineColor="Black">
                                            <MajorGrid LineColor="Transparent" />
                                        </AxisY>
                                        <Area3DStyle Enable3D="true" LightStyle="Realistic"></Area3DStyle>
                                    </asp:ChartArea>
                                </ChartAreas>
                            </asp:Chart>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%--Dynamically Generating The GridView and Its Title--%>
        <div id="gridView" class="gridview-container">
            <asp:PlaceHolder ID="plhForGridView" runat="server"></asp:PlaceHolder>
        </div>

        <%--This Script is for scrollable gridview --%>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>

            /*Set Constant Variabe reading from Web Config File*/
            var seconds =<%=ConfigurationManager.AppSettings["SetSeconds"]%>;//Move from first div to another div
            var interval = <%= ConfigurationManager.AppSettings["SetInterval"] %>;//Set the intervel seconds of automatically scrolling
            var pixelsToScroll = <%= ConfigurationManager.AppSettings["SetPixelToScroll"] %>;//seconds to see any data scrooling automatically

            /*script is for assign CSS to the Condition in GridView For Blinking of Its Rows*/
            function toggleBlink(row) {
                row.classList.toggle('blink');
            };

            //Scroallable function for GridView
            $(document).ready(function () {
                function scrollGridView() {
                    var gridViewContainer = $(".gridview-container");
                    gridViewContainer.animate({ scrollTop: "+=" + pixelsToScroll + "px" }, interval);
                    setTimeout(scrollGridView, interval);
                }
                setTimeout(scrollGridView, 0);
            });

            //function is for Hide and Show Div and Chart
            function toggleDivs() {
                var chartDiv = document.querySelector('.chart-container');
                var gridviewDiv = document.querySelector('.gridview-container');

                chartDiv.style.display = chartDiv.style.display == 'none' ? 'block' : 'none';
                gridviewDiv.style.display = gridviewDiv.style.display == 'none' ? 'none' : 'block';
            };

            // Initial delay to show the first div for 5 seconds
            setTimeout(() => {
                toggleDivs();
                setTimeout(function () {
                    window.location.reload();
                }, 90000);//
            }, seconds);
        </script>
    </form>
</body>
</html>

[Solved] Website pages crashed on mobile browser with CSS in ASP.Net

Company

Explore

Follow us

Contact Us