Output issues after upgrade to 2019r2

[jmehaffey]

I am struggling with getting our content ready to upgrade to Flare 2019r2. The code changes for the new accessibility features have broken our output pretty badly.
We are having the following issues:
1. Content is being cutoff at the bottom of each page. I have endlessly tried adjusting the css, but the only fixes that work also cause 2 (sometimes 3) scroll bars to appear.
2. If I try setting the overflow property to 'visible', it just displays the content behind/below the footer.
3. I created an entirely new masterpages, skins, etc. from scratch in 2019r2, which solves the first two issues, but I cannot get the footer to 100% screen width. It stops at the container for the sidenav menu unless I place it outside of the </body> tag which just causes problem #2 to happen.

I have gotten everything to work/display correctly using a skinless output with a flex-grid masterpage, but I lose the accordion menu and just get the lame menu proxy output.
Does anyone know how to:
a.) Get the footer to 100% in a sidenav project? or b.) Know how to override the styles in the meny proxy and build the accordion menu?

It is the most basic web layout there is. I wish this was a template and didn't involve so much hacking, but any help would be greatly appreciated.

[Nita Beck]

I am struggling with getting our content ready to upgrade to Flare 2019r2. The code changes for the new accessibility features have broken our output pretty badly.

MadCap made some structural changes to certain HTML tags that you'll need to account for if your scripts and such reference those tags.

To their credit, they discuss the changes in a knowledge base article: http://kb.madcapsoftware.com/Content/Mi ... hanges.htm

I'd start by studying that article and then seeing if components in your project are referencing the old tags.

I'm not saying this'll fix all your issues, but that's where I'd start.

HTH

[jmehaffey]

Thanks Nita. I will take a look and see if there is something I have overlooked.

[NorthEast]

(a) Depends how you want the footer to behave.

It's easy (depending on your scripting ability) to add a fixed footer that is permanently visible at the bottom of the Side Nav layout. Side Nav uses a flex layout, so you could use jQuery append to insert a div inside div.off-canvas-content.inner-wrap (the main flex container), so it appears after div.main-section (the container for the side nav panel and topic).

I've no idea how you'd get a 100% width scrolling footer to work - i.e. have a footer that's part of the topic body, but will "push up" the Side Nav pane when you scroll down the topic. I spent a day playing around with it (using flex, sticky, etc.), and it just made my brain hurt.

(b) You can't build a menu proxy that uses an accordion menu. I'd suggest you send a feature request to MadCap - it'd be very useful, and probably quite easy for them to do.

If you build an output with a Top Nav skin, the output does actually include a hidden copy of the Side Nav accordion control - there's a nav.sidenav-wrapper set to display:none. So you could actually use that, but I wouldn't recommend it, since it looks like it's included in the output by mistake, and may just disappear at some time.

[jmehaffey]

Hi Dave,

I tried to get that footer in the body and had the same reaction as you. Wanted to toss my monitor out the window! I'll give the jQuery method a try. I know enough jQuery to get myself in trouble, but have some resources here if I get stuck. Thanks for the assist!

[NorthEast]

It'd only need:

Code: Select all

$("div.off-canvas-content.inner-wrap").append("div.your-div-class-goes-here");

Assuming your footer content is inside div.your-div-class-goes-here

Then style it as required.

[jmehaffey]

Thanks again for the help Dave! The jQuery method is getting me what I was looking for. I am still having a problem with the overflow-y on longer topics, though. I either end up with a footer that shows up mid-page with the content overflow showing behind/below the appended footer, cutoff/hidden content, or I get 2 or 3 scroll bars on the right side. Might need to move this on to support unless you have any other tricks up your sleeve. Thanks again for the tip on the append method though.

[NorthEast]

Apologies, as the last code example was a bit duff - inside append it should have had the HTML to insert - like append("<div class='my-footer'>Content</div>")

Anyway, I just did a quick test, using this exact code in a master page:

<div class="my-footer">Content</div>
<script type="text/javascript">/*<![CDATA[*/$(document).ready(function(){
$("div.my-footer").appendTo("div.off-canvas-content.inner-wrap");
});/*]]>*/</script>

So there's some dummy footer content in <div class="my-footer">Content</div>, and the script uses appendTo to insert div.my-footer inside div.off-canvas-content.inner-wrap. (append and appendTo do the same thing, just the syntax is the other way around.)

The footer area is displayed below the side nav menu and topic, and no problems with content overflow, scroll bars, or anything else. It also behaves in tablet/mobile layout.

And I hadn't even got round to adding any CSS for div.my-footer - ideally it should have some flex attributes too, to define how it behaves with the other elements.

Maybe try it in a blank test project first.