0

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

2
  • The div goes off-screen with the given margin ..?
    – Teemu
    Jul 1, 2022 at 6:29
  • Hi @Teemu no it doesn't margin left and right are working
    – Fandango68
    Jul 6, 2022 at 0:41

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.