Issue
Very generic issue I am sure, and apologies for the title, but not sure how else to word this.
Background: VisualStudio 2022 preview, .Net 4.8, ASP.Net (not Core)
index.aspx
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
iframe {
position: absolute;
border: solid ;
border-width: 1px;
box-sizing: border-box;
min-width: 855px;
min-height: 465px;
}
</style>
<div class="divCanvas">
<canvas id="compass" height="230" width="230"></canvas>
</div>
<iframe id="if1"
src="https://awebsite">
</iframe>
</asp:Content>
CSS
#compass {
background: url("../images/compass2.png");
background-size: cover;
vertical-align: middle;
}
.divCanvas
{
z-index:99;
position:absolute;
margin-left: 525px;
margin-top: 70px;
}
So what we have here is a simple <iframe> showing me a website and using CSS and <div> I am overlaying a <canvas> object over the iframe, and yes in a specific spot so that it overlays an area of the iframe where I want it displayed, hence the margin-left and margin-right properties.
Problem is, this only works on desktop browsers (all of them), but does nothing other than show the iframe in a mobile browser (all of them again). What's happened with my <div>?
Incidentally, the VS project generated a ViewSwitcher.ascx file, which I think is the issue here, but it doesn't stand out where in the code there is anything happening for mobile browsers.
Any ideas please? Should I be using the ViewSwitcher ascx file in some way to display my div over the iframe? I have no idea what viewswitcher is really doing here in the first place or if it's even needed.
Thanks
Solution
The answer was in lack of design. Basically, I was missing the Site.Mobile.Master mobile version of the Site.Master file, and I had to include the reference to the same CSS for the desktop version. Yes, I wanted the mobile version to act like the desktop!
<webopt:bundlereference
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Mobile.master.cs" Inherits="mysite.Site_Mobile" %>
<%@ Register Src="~/ViewSwitcher.ascx" TagPrefix="friendlyUrls" TagName="ViewSwitcher" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Refresh" content="60" />
<title>mywebsite</title>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
<webopt:bundlereference runat="server" path="~/Content/css" />
</head>
<body>
<form id="form2" runat="server">
<div>
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</section>
<friendlyUrls:ViewSwitcher runat="server" />
</div>
</form>
</body>
</html>
Answered By - Fandango68 Answer Checked By - Candace Johnson (PHPFixing Volunteer)
Posts
