Quite simple really.
I have two ContentPanes that I load content into dynamically. The content I load dynamically contains TitlePanes. When I collapse these TitlePanes the content below the TitlePane does not shift up.
(you may ask why I don't load the content into ContentPanes INSIDE the TitlePanes. The reason I don't do that is because the TitlePanes won't expand to cover the dynamic content)
The answer for this can be found here. All you need to do apperently is add doLayout="false
<div dojoType="dijit.layout.ContentPane" id="..." splitter="false" doLayout="false"></div>
Related
When I use IncludeInPage property of DotVVM control, this control is rendered for a split of second during page load. Include in page contains value binding and while it is not evaluted this control is displayed I guess. This is quite disturbing. How can I prevent it?
Control example:
<div IncludeInPage="{value: Gender == Gender.Male}">
This text should not be displayed at all.
</div>
Workaround: If you want to hide/show the content staticly and need to show/hide it until reload of page, use resource binding.
<div IncludeInPage="{resource: Gender == Gender.Male}">
This text should not be displayed at all.
</div>
This does not apply to situation when you want to show/hide content later dynamically.
I've created a TabControl following this and similar guides:
https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
The relevant code on my test Tabs.razor page is:
<TabControl>
<TabPage Text="Tab 1">
<h1>The first tab</h1>
</TabPage>
<TabPage Text="Tab 2">
<h1>The second tab</h1>
</TabPage>
<TabPage Text="Tab 3">
<h1>The third tab</h1>
</TabPage>
</TabControl>
The pages inside the tabs themselves will have a lot more content than just one sentence. All the tabbed examples I've found just have the tab contents like this, flat on the page. Is there some way to make the tab content more modular, possibly having it live in separate files? I'd want it all to load on the page initialization, I'd just like to not have a big monster .razor page with the contents of all the tabs.
I'm not sure if I need nested layouts here or what, or how the rendering would work (I'll need the tab contents to behave like top-level razor pages with functions and submit actions, etc...).
Pretty new to this, obviously, and haven't been able to find an answer. Thanks in advance.
<TabPage Text="Tab 1">
<MyFirstTabbedComponent />
</TabPage>
and then develop MyFirstTabbedComponent.razor as a page/component.
enfin, you have already done something similar.
I have been searching online for a few days now trying to crack this:
My code approx layout:
<body>
<div id="wrapper">
<div id="top-header"></div> <!-- This is a fixed position header -->
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
I'm trying to make my footer so it works in the following two scenarios:
1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)
2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).
Unsuccessful FIX #1
So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.
Unsuccessful FIX #2
I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.
I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.
JMSSTKS
I ran into this issue while building my online design portfolio. It seems complex to me, but I know there is a way to do it, so I am frustrated that I can't find a solution. Please help!
My design calls for the use of media queries to optimize my site for mobile, tablets, and desktops/laptops. The mobile version has a single column of thumbnails. When each thumbnail is clicked, a hidden div is revealed below it via jQuery slideToggle, pushing down the other project thumbnails.
That is how the mobile version works and it works great. The problem is the tablet and dektop/laptop versions. For those versions, I want the the thumbnails to display in a grid pattern. Two side-by-side on tablets and three side-by-side on desktop/laptops with infinite rows for all versions. I can make them display in a grid with HTML, but the problem comes when a thumbnail is clicked and it reveals the div below it via slideToggle. Since I'm using media queries, the order of the HTML is still the same as the mobile version and the hidden divs are directly below each thumbnail in the code. Thus, revealing the hidden div pushes down all the other thumbnails, including the thumbnails in the same row as the thumbnail that is being clicked (if they come after it in the code). The last div in each row does what I want it to; the next row is pushed down when the hidden div is revealed. I want the hidden div to display below the row it is in and push down the thumbnails that are in the rows below.
And obviously I want to stick with media queries to avoid creating separate HTML, if possible.
Repeating HTML for the thumbnails and hidden divs:
<div class="body">
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
</div>
I created a jsfiddle to demonstrate the problem: http://jsfiddle.net/EuHyc/13/
Please note that the divs are hidden using jQuery. Hiding them with CSS was not allowing my content within the hidden div to display properly when revealed. Also, I had to use display:inline-block because float:left does not force the hidden div to appear below it in the layout.
I hope I adequately explained the problem. Thanks in advance for any help! I sincerely appreciate it!
Episerver always wrap shared block in a tag. I would like to get rid of this. So if in my LinkBlock has a Template with only
link
I would not get a
<div>link</div>
in the view for a user.
If this is not possible how can I change <div> to any other tag, or put a CssClass on it. Like it is possible in not shared blocks:
<EPiServer:Property runat="server" PropertyName="RightContentArea" CustomTagName="aside" CssClass="column-2 sidebar"></EPiServer:Property>
I believe it is the rendering of the ContentArea property which adds the div tags around the blocks it contains.
EPiServer suggests that in order to preserve the editing functionality of the block elements themselves they need to have the div around them.
A possible solution might be for you to do your own custom rendering of content areas, but depending on the kind of block templates you're using it can be tricky to get editing to work. The example in the link is for rendering multiple blocks of the same type.
You can use the CustomTagName and CssClass properties of the Property control to format the container element.
You may also use RenderSettings to modify container elements of child elements (where applicable).
I use this trick in cshtml:
#RenderBlocks(Model.CurrentPage.Content1)
#* ---------------------------------------------------------------------------------- *#
#* Render ContentArea without addition DIVs that EpiServer embed. That breaks layout a lot. *#
#helper RenderBlocks(EPiServer.Core.ContentArea content) {
if(null != content){
var blocks = content.FilteredContents.ToArray();
foreach(var block in blocks){
#Html.PropertyFor(x => block)
}
}
}
You can choose the tag using the CustomTagName attribute on the Property Control
Alternatively, if you wanted to remove the tag, you could use a control adapter. A good example is found here
You can also create a custom content area that doesn't render the divs when edited in live mode and only renders them in edit mode.
If you only need to do this once or twice I would still recommend going with the ChildrenCustomTagName route as it's a bit mroe flexible. If you need to do this a lot and you can't change your CSS easily then I would go custom content area. If you are interested in how to remove the div's I wrote a blog post and a sample site on github here Extra divs in content area how to remove them ?
Since i wasn't able to remove the <div>'s i didn't want, i put my own CSS class on them. This did the trick for me in Webforms. (If anyone still uses it)
Use <RenderSettings ChildrenCssClass="yourCssClass" />
<EPiServer:Property runat="server" PropertyName="RightContentArea"CustomTagName="aside" CssClass="column-2 sidebar"><RenderSettings ChildrenCssClass="yourCssClass"></RenderSettings></EPiServer:Property>