Layout problems on nested template + query + foreach
Hello, I have a Master template with inside a navbar and a footer, in the middle the render of the body.
Created a new template for an item with the following code:
Now, if I insert the code like this, my footer crash (no idea why), but.... if I quit the last closing div, all is working again, not perfect layout, but almost image and table is displaying correctly.
The image in the top left corner of the footer disappear, the all content becomes with grey background colour as the first row of the footer.
But, if I delete the last tag "" from the nested template, all the footer and content page are showing up correctly, (just... the footer becomes of 8 column size instead of full page and I get an error of a missing closing tag)
Any idea about what I did to mess up all ? and how to fix?
It's pretty hard to see what's gong on without all of your css. I did run your markup through an HTML validator - I'd recommend you doing this, it will really help spot the issue. It's probably a missing quote or using an opening tag as a typo when you meant a closing one!
There are a couple of things that might be causing you issues:
1) This line
<a href="#@item.Name" data-toggle="collapse">
This could output invalid links as the name of your node might contain a space or any other char that's not valid for an id - I'd reconsider doing this or change it to "selection-@item-id" which will be safer. (also change the corresponding id output in the child view).
2) Inline CSS should be kept to a minimum. The height on the image in the header should be height="40" not 40px as it's inline.
3)
var selection = Model.Content.Site().FirstChild("azienda").Children("AziendaItem")
.Where(x => x.IsVisible());
I'd recommend you break this down. e.g.
var homeNode = Model.Content.Site().FirstChild("azienda");
And then null check this before getting your children separately e.g.
var selection = homeNode.Children("AziendaItem")
Are you sure this shouldn't be "aziendaItem".
I'd also recommend wrapping any complex inline razor in brackets (sometimes Razor gets a bit confused... so @(inlineRazorHere) is much safer).
Also merge that foreach into the code block above - so something like:
@{
var homeNode = Model.Content.Site().FirstChild("azienda");
if (homeNode != null)
{
var selection = homeNode.Children("aziendaItem")
.Where(x => x.IsVisible());
foreach (var item in selection)
{
<div class="well">
<div class="col-xs-10">
@(item.GetPropertyValue("aziendaItemTitolo"))
</div>
<a href="#@item.Name" data-toggle="collapse">
<div class="col-xs-2" style="text-align: right">
<i class="fa fa-plus" aria-hidden="true">
</i>
</div>
</a>
</div>
@* remember this might be better as id="[email protected]" *@
<div id="@item.Name" class="collapse">
@(item.GetPropertyValue("aziendaItemDescrizione"))
</div>
}
}
}
Layout problems on nested template + query + foreach
Hello, I have a Master template with inside a navbar and a footer, in the middle the render of the body. Created a new template for an item with the following code:
Now, if I insert the code like this, my footer crash (no idea why), but.... if I quit the last closing div, all is working again, not perfect layout, but almost image and table is displaying correctly.
Follow the master:
The image in the top left corner of the footer disappear, the all content becomes with grey background colour as the first row of the footer. But, if I delete the last tag "" from the nested template, all the footer and content page are showing up correctly, (just... the footer becomes of 8 column size instead of full page and I get an error of a missing closing tag)
Any idea about what I did to mess up all ? and how to fix?
Hi Alessandro,
It's pretty hard to see what's gong on without all of your css. I did run your markup through an HTML validator - I'd recommend you doing this, it will really help spot the issue. It's probably a missing quote or using an opening tag as a typo when you meant a closing one!
There are a couple of things that might be causing you issues:
1) This line
This could output invalid links as the name of your node might contain a space or any other char that's not valid for an id - I'd reconsider doing this or change it to "selection-@item-id" which will be safer. (also change the corresponding id output in the child view).
2) Inline CSS should be kept to a minimum. The height on the image in the header should be height="40" not 40px as it's inline.
3)
I'd recommend you break this down. e.g. var homeNode = Model.Content.Site().FirstChild("azienda"); And then null check this before getting your children separately e.g. var selection = homeNode.Children("AziendaItem") Are you sure this shouldn't be "aziendaItem".
I'd also recommend wrapping any complex inline razor in brackets (sometimes Razor gets a bit confused... so @(inlineRazorHere) is much safer).
Also merge that foreach into the code block above - so something like:
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.