https://discord.umbraco.com
Join Discord
My master template is being wrapped in it's own <head> and <body> tag, how do I fix this? Umbraco 13
# help-with-umbraco
a
Here is what my HTML looks like, the master template which my views inherit are being wrapped in its own tags and I can't figure out where they are coming from? <script src=" https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js "> <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css "> How do I fix this?
s
FYI to make this a bit more readable, you can surround it with triple backticks AND give it a language (html):
Copy code
html
<html lang="en"><head><script src="chrome-extension://eppiocemhmnlbhjplcgkofciiegomcon/libs/extend-native-history-api.js"></script></head><body><header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
">
</header>
Not sure what your question is? What does your master template look like and what does the template for your document type look like?
a
ok thanks, here is the master template
Copy code
html

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
" rel="stylesheet">
</header>
<body>
    
    @RenderBody()
    
</body>
<footer>
    @RenderSection("BhajanViewScripts", required: false);
    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            slidesPerView: 3,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
</footer>
</html>
s
Backticks are these: ` https://en.wikipedia.org/wiki/Backtick 😉
a
haha thanks, I'm not exactly sure how this works, I've surrounded it in ''' but not sure how to specify html for the markup
s
it's the wrong character, but don't worry about it!
a
tried that, maybe it doesnt like the razor syntax?
s
No you need to connect them without a space in between!
a
ok there we go
it needed to be recognised by some sort of intellisense thing xD
here is what it looks like on the browser:
Copy code
html
<html lang="en"><head><script src="chrome-extension://eppiocemhmnlbhjplcgkofciiegomcon/libs/extend-native-history-api.js"></script></head><body><header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
">
</header>

    
    

<h1>Atma Bhog :)</h1>

<div class="umb-block-list">

<h2 style="padding: 20px">TEST</h2>

<div style="padding: 20px">
<h2>HI TEST RTE</h2>
</div>


<div class="AllDeitiesPartial">
    <div class="swiper swiper-initialized swiper-horizontal swiper-backface-hidden">
    <p>Bhajans of All Deities Partial</p>
    <p>Deity Folder Id: 1088</p>
s
Anyway, to explain: when your template says: 
Layout = "Master.cshtml";
It will take anything in 
Master.cshtml
and at the place it says 
@RenderBody()
it will put the exact html from your template. So imagine this `Master.html`:
Copy code
html
@{
    Layout = null;
}
<!DOCTYPE html>
 <html>
 <head></head>
 <body>
     @RenderBody()
 </body>
 </html>
And your template is, for example `TextPage.cshtml`:
Copy code
html
@{
    Layout = "Master.cshtml";
}
<h1>Hello World!</h1>
a
the only place I have defined a header, body and footer is in the master template, the other templates inherit master template and use @renderbody
s
Then the output in the browser becomes:
Copy code
html
<!DOCTYPE html>
 <html>
 <head></head>
 <body>
     <h1>Hello World!
 </body>
 </html>
a
yes that is what I have done
s
So what's the problem the output looks good to me?
a
Copy code
html
@{
    Layout = "Master.cshtml";
    var home = (Home)Model.Root();
    var bhajans = Model.Children<Bhajan>();
}

<h1>@home.Header</h1>
the first few lines where the body is defined in the header in the first example, along with the tag and its chromejs declaration
sorry I mean this. this is what is being rendered on my browser
s
Ah I see now.. this is wrong!
Copy code
html
<html lang="en"><head><script src="chrome-extension://eppiocemhmnlbhjplcgkofciiegomcon/libs/extend-native-history-api.js"></script></head><body><header>
a
yes! but I have no idea what is causing it
I've posted my master template and the other doc types inherit master as the layout
s
Try changing your master template to exactly this:
Copy code
html
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}<!DOCTYPE html>
<html lang="en">
<header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
" rel="stylesheet">
</header>
<body>
    
    @RenderBody()
    
</body>
<footer>
    @RenderSection("BhajanViewScripts", required: false);
    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            slidesPerView: 3,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
</footer>
</html>
You'll notice the change is that this part is connected to each other:
Copy code
html
@{
    Layout = null;
}<!DOCTYPE html>
Where you had an extra two enters before the doctype
a
thanks, here is the result:
Copy code
html
<html lang="en"><head><script src="chrome-extension://eppiocemhmnlbhjplcgkofciiegomcon/libs/extend-native-history-api.js"></script></head><body><header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
">
</header>

    
    

<h1>Atma Bhog :)</h1>

<div class="umb-block-list">
s
Yeah.. that's weird, and wrong! It feels like a browser extension might be causing this.
Do you have firefox installed, maybe try it there? Or another browser without extensions?
a
ok, I'll try that now, thanks!
s
Otherwise, remove the swiper parts?
Copy code
html
<script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
" rel="stylesheet">
a
it was doing it before the swiper parts 🙂
I have a feeling it might be some extension I have installed
s
I know but if it works without swiper then we know where to look!
a
waiting to install firefox now
yes, still doing the same with swiper removed
s
ok, and on firefox too?
a
yes, just tried it there, it's the same with firefox + no extensions
s
how about if you change your master template for a minute to:
Copy code
html
@{
    Layout = null;
}<!DOCTYPE html>
 <html>
 <head></head>
 <body>
     @RenderBody()
 </body>
 </html>
a
Copy code
html
<html lang="en"><head><script src="chrome-extension://eppiocemhmnlbhjplcgkofciiegomcon/libs/extend-native-history-api.js"></script></head>
<body>
    
    

<h1>Atma Bhog :)</h1>

<div class="umb-block-list">
this is the result but Ive had to exclude my scripts, trying it again with my scripts
s
Oh wait, the result here that you showed earlier is correct!
a
the header and footer are in the body here, are you sure? xD
also with the header tag removed and replaced with the head tag, the header is no longer in the body but the footer is still in the body
s
You put them there in the master template, so.. yeah
a
I thought the body were defined by the templates that inherit the master?
s
I need to leave, I think I still don't understand the problem! 😅
a
and that the master contains the header, footer and @renderbody()
lol no problem, thanks very much for your time anyway 🙂
s
You can think of it differently.. instead of 
@RenderBody()
, imagine it says: 
@PutMyStuffHere()
RenderBody()
does NOT add ``etc.. it literally only adds what is in the template inheriting from Master
a
Yea, that's my understanding of it too 🙂
well if you have time to look later, my master has this layout
Copy code
html
</head>
<body>
    
    @RenderBody()
    
</body>
<footer>
but now the footer is contained within the body
I think this is an umbraco specific issue
s
I think you should put the exact output in here and see if it validates: https://validator.w3.org/#validate_by_input
Definitely not an Umbraco issue. I just don't know what your issue is now, can you point out exactly which line is wrong, in your opinion? Maybe post: EXACTLY what the HTML output is when you do a View Source (the whole thing, don't cut it off and EXACTLY what you think the HTML output should be (also, don't cut it off).
I think I found it!
Copy code
html
</body>
<footer>
This is in your Master template.. that is wrong. You can not start anything new after you've closed the 
body
tag.
So try:
Copy code
html
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}<!DOCTYPE html>
<html lang="en">
<header>
    <script src="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js
"></script>
    <link href="
https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css
" rel="stylesheet">
</header>
<body>
    
    @RenderBody()
<footer>
    @RenderSection("BhajanViewScripts", required: false);
    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            slidesPerView: 3,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
</footer>    
</body>
</html>
a
ok, thanks! this is exactly the output I get 🙂
I thought this was incorrect html as the footer was supposed to be outside of the body?
my apologies for any confusion caused!
but this has definitely solved my header issue
s
no worries! no, nothing can be outside of 
</body>
(except for 
</html>
).
a
I see 🤦‍♂️ ... haha thank you!
s
Haha I'm happy that it's resolved now 🎉
12 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by