Stopping body proxy content from showing behind fixed footer

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Stopping body proxy content from showing behind fixed footer

Post by ChoccieMuffin »

Afternoon all.

I'm playing with HTML5 and trying to get things to look nice. I've managed to get the footer for each topic to display at the bottom of each page (thanks to Scott De Loach at MadWorld Europe!) BUT I don't know what I have to change in the CSS for MadCap|bodyProxy so that any topic that is longer than the page doesn't display its content behind my footer. I wasn't at Scott's presentation so only got a photo of one slide from a colleague, not the full story.

If you're interested, I added an id for my footer and styled it like this:

Code: Select all

#footer
{
	position: fixed;
	bottom: 0;
	left: 0;
}
In MadCap|bodyProxy I've tried setting margin-bottom, padding-bottom or max-height to a figure of less than 100% (I tried 80% so I could see it) but none of those worked. I know it can be done but could do with a bit of extra help. Any suggestions from the CSS gurus out there?

Many thanks
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Post by AlexFox »

I had similar problems with this, basically because I was putting a footer inside the <body> as I suspect you're doing. Moving it outside the <body> in the masterpage will cause you other problems. My workaround was a little hacky but reliable, you could give it a try.

Inbetween your body proxy and footer element, put:

Code: Select all

<div id="footer-padder"></div>
Create a .js file and link to it from the relevant masterpages. Make the following the content:

Code: Select all

$(document).ready(function() {		
		$(window).resize(function() {
			var footerHeight = $('#footer').height();
			var requiredPadderHeight = footerHeight + 15;
			$('#footer-padder').css('margin-bottom', requiredPadderHeight + 'px');
		})
});
This is putting a margin at the end of the bodyproxy with a bottom margin that is the height of your footer + 15px. It'll fire each time the browser window is resized.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

Thanks, Alex, I'll give it a try.

This is what my master page looks like:
Masterpage.png
Bits of relevant code:

Code: Select all

#fixed
{
margin-bottom: 5cm;
}

table
{
	width: 95%;
	margin: 15px 10px 15px 0px;
	padding: 5px 0px 5px 0px;
	border: none;
	border-collapse: collapse;
}

#footer
{
	position: fixed;
	bottom: 0;
	left: 0;
}

It doesn't matter if the topic body proxy has "id="fixed"" or not, the content still goes behind the footer.

I'm surprised there isn't a more straightforward CSS solution though, so if anyone has another suggestion, please speak up. :)
You do not have the required permissions to view the files attached to this post.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

AlexFox wrote:I had similar problems with this, basically because I was putting a footer inside the <body> as I suspect you're doing. Moving it outside the <body> in the masterpage will cause you other problems. My workaround was a little hacky but reliable, you could give it a try.

Inbetween your body proxy and footer element, put:

Code: Select all

<div id="footer-padder"></div>
Create a .js file and link to it from the relevant masterpages. Make the following the content:

Code: Select all

$(document).ready(function() {		
		$(window).resize(function() {
			var footerHeight = $('#footer').height();
			var requiredPadderHeight = footerHeight + 15;
			$('#footer-padder').css('margin-bottom', requiredPadderHeight + 'px');
		})
});
This is putting a margin at the end of the bodyproxy with a bottom margin that is the height of your footer + 15px. It'll fire each time the browser window is resized.
@Alex, I'm trying to follow your suggestion but I'm missing a couple of steps.
Do I have to add anything to my stylesheet to define #footer-padder?
Where do I save the new .js script to? (Have put it in a new folder I've created, \Content\Scripts.)
How do I link to the script from the masterpage?

EDIT:
So I found an instruction on how to add a script, tried it, and still no success. I'm starting to get very cross about this, I thought it'd be an easy thing to do! If I don't get it sorted I'm just going to go back to having my footer at the bottom of body and NOT be fixed because I can't keep it like this...
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Post by AlexFox »

Hey, don't give up!

You'll want to put the <div id=footer-padder></div> between the <MadCap:bodyProxy/> and the <table id="footer">

You don't need to define anything in the stylesheet.

Put the jQuery code I supplied in its own file such as footer.js and put that in the Content/Resources/Scripts folder then reference it from the masterpage by putting <script src="../Scripts/footer.js"></script> (double check I've got your folder structure right and correct as necessary)

The reason your body content is going behind the footer FYI is that absolute and fixed positioning is taking the element out of the flow of the page, so the other content is effectively ignoring it.
MadCapDan
Jr. Propeller Head
Posts: 2
Joined: Wed Sep 26, 2018 6:08 pm

Re: Stopping body proxy content from showing behind fixed fo

Post by MadCapDan »

AlexFox wrote:Hey, don't give up!
Hi Alex -- your help is much appreciated!

I'm having trouble with the script as well. I'll just show you exactly how I have everything set up. I tried to change the font to red on the relevant pieces but it doesn't seem to work when wrapped in the Code tags.

Here's my master page:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <meta name="author" content="" /><title></title>
    </head>
    <body><script type="text/javascript" src="../Scripts/footer-padding.js"></script>	
        <div>
            <div id="contentBody">
                <div>
                    <div class="sideContent">
                        <div>
                            <MadCap:topicToolbarProxy />
                        </div>
                        <MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" data-mc-skin="/Project/Skins/SideMenu.flskn" />
                    </div>
                    <MadCap:breadcrumbsProxy />
                </div>
            </div>
        </div>
		<MadCap:bodyProxy />
		<div id="footer-padder"></div>
        <div id="footerbar" class="footer foot-center" style="position: absolute; bottom: 0; left: 0; width: 100%;">
            <MadCap:snippetBlock src="../Snippets/OnlineFooter.flsnp" />
        </div>
    </body>
</html>
Here's my footer snippet just in case:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <body>
        <div class="HomeMasterPageFooter outer-row">
            <div class="logo-left"><a href="../../_Global-Topics/Home.htm"><img src="../Images/Logo_White_229W.png" alttext="" class="Foot-Hyperlinked footer-logo" /></a>
            </div>
            <div>
                <div class="footer-links"><a href="http://www.blank.com/associate/#opportunities">Jobs</a><a href="http://www.blank.com/faq/">FAQ</a><a href="http://www.blank.com/legal/">Legal</a><a href="http://www.blank.com/contact-us/">Contact Us</a><a href="http://www.blank.com/privacy-policy/">Privacy Policy</a>
                </div>
                <p class="Copyright">Copyright © <MadCap:variable name="General.Year" /> <MadCap:variable name="General.CompanyName" /></p>
            </div>
            <div class="footer-icons"><a href="https://www.facebook.com/" target="_blank"><img src="../Images/GrayFacebookIcon.png" alttext="" class="Foot-Hyperlinked" /></a><a href="https://twitter.com/" target="_blank"><img src="../Images/GrayTwitterIcon.png" alttext="" class="Foot-Hyperlinked" /></a>
            </div>
        </div>
    </body>
</html>
Here's how I've stored the script:
jsfolder.PNG
Any ideas as to what I'm doing wrong?

Thanks!
You do not have the required permissions to view the files attached to this post.
MadCapDan
Jr. Propeller Head
Posts: 2
Joined: Wed Sep 26, 2018 6:08 pm

Re: Stopping body proxy content from showing behind fixed fo

Post by MadCapDan »

Eureka! The reason the script wasn't working for me is that I had significant padding on the #footerbar element (tweaked the name since I already had a class called "footer"). To account for the padding, I swapped out the height() method with innerHeight() and voila, I finally have a sticky footer!

Much obliged, Alex! That footer has been driving me crazy!
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Post by AlexFox »

You're most welcome, Dan :)

@Choccie, the first thing to do is build an output that should be working and use the browser DevTools to inspect what's going on (I prefer Chrome for this but any browser should have these tools)

In Chrome (for example) right click in your footer and click 'Inspect' to open the DevTools window, and expand the element groups until you find your footer-padder (it'll be under section class="main-section", div class="body-container" with maybe a few more depending on the skin you're using). When you find it, click the device toolbar or press ctrl + shift + m to put the browser window into device responsive mode and you'll see a broken up grey bar appear at the top (just below the dimension fields). If you click the different sections on this bar you'll be forcing the browser to act as a device with different viewports which will reliably fire the browser resize event. When this happens you should see the margin-bottom attribute be set on the footer-padder in the DevTools window. If this doesn't happen and the script is successfully loaded, you should see an error in the bottom of the window you can paste here. If you don't see anything happen and you don't get any errors, then the script hasn't been loaded.

You shouldn't need to but if you're having trouble it may be worth setting an initial margin-bottom value in the stylesheet for #footer-padder after all.

Let me know how you get on.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

Nope, still confused as [insert expletive here].

I do use the inspector in Chrome and it has sometimes come up with some really useful stuff, but in this instance, nope.

Using the SideNav template, I added the footer id thing:

Code: Select all

#footer
{
   position: fixed;
   bottom: 0;
   left: 0;
}
What this does is starts the footer all the way to the left. When you hover over it it overlaps both the div.body-container (something that's not defined anywhere in my stylesheet so I think it's something that is created when the output is built) AND the sidenav-wrapper div.

So I think I'm just going to have a little scream to myself, perhaps a bit of a cry, blow my nose and get ready to go home for the weekend.

(There MUST be a CSS solution to this!)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Post by AlexFox »

I've had a look at some of my previous sidenav work, I wanted the footer to occupy 100% of the body, but none of the sidenav. To do this I basically forced the body to be 100% width of the container MadCap puts it in:

Code: Select all

body {
margin: 0 !important;
padding: 0 !important
}
Then made sure that the footer is defined in the masterpage after the bodyProxy (which you already have I believe).

Then just make sure that in each topic, your content is inside a div padded by 1em (or whatever your preference).

If you wanted a footer to go across the sidenav, I'm afraid I never wanted this personally so didn't make a solution.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

AlexFox wrote:...
Then just make sure that in each topic, your content is inside a div padded by 1em (or whatever your preference).
Thanks, I'm giving it a go. Just for clarification, can I put the topic body proxy inside a div on the masterpage, or do I have to go through (thousands of) topics and add a div in all of them? If the second, then it's not really a sensible solution for me.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Post by AlexFox »

No reason you can't put it in the masterpage :)
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

Woohoo, I think I've (almost) done it, and without using javascripts (which I don't understand - another skill need here, I feel) but using some of the very useful suggestions on this thread, so thank you all.

What I've ended up with is the footer table that goes all the way across the browser window, so the side-nav as well as the topic body, but I didn't mind either way so it's not a problem. I'll explain what the "almost" is later. This is what I've done:

In the master page, between a div that contains my table footer (div#footer) and the div that contains the topic body, insert the div suggested by alex, <div id="footer-padder"></div>. (Because the table might grow in height when it gets narrow, the tablet medium has height at 90px.) The div that the footer table is in is set at 98% to allow the bottom of the scrollbar beside the fixed footer to be seen. 98% worked well.

Here's the code from my stylesheet:

Code: Select all

#footer-padder
{
	height: 60px;
}

#footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 98%;
	background-color: #e5e5e5;
	margin: 0;
	padding: 5px;
}
Here's the code from my masterpage:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
    </head>
    <body>
        <MadCap:topicToolbarProxy data-mc-skin="/Project/Skins/HTML5_Topic_Toolbar.flskn" />
        <MadCap:breadcrumbsProxy />
        <div>
            <MadCap:bodyProxy />
        </div>
        <div id="footer-padder"><![CDATA[
		]]></div>
        <div id="footer">
            <table class="footer">
                <col />
                <col />
                <tbody>
                    <tr>
                        <td>
                            ...snip...</td>
                        <td>...snip...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
The remaining problem is that I don't know how to include a similar "footer-padder" bit at the bottom of the side-nav bit, so I would welcome any suggestions for that, because if I have a very long side-nav menu (which I know I will have in some of my bigger projects) it won't be possible to see the very last item if the footer table is in the way. Alternatively, if anyone can work out how to get the table only under the topic body rather than under both topic body AND side-nav that'd do nicely. (Meanwhile I will keep looking at the side-nav skin and see if there's a neat way to add a footer-padder div there too.)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
oelgoetz
Propeller Head
Posts: 41
Joined: Wed Jun 23, 2010 8:04 am

Re: Stopping body proxy content from showing behind fixed fo

Post by oelgoetz »

ChoccieMuffin wrote:I've managed to get the footer for each topic to display at the bottom of each page (thanks to Scott De Loach at MadWorld Europe!)
Hi Muffin, Hi Scott,

could you please share the "Sticky footer" story here with us, please? Or - in case you did already - can you provide a link to it?
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Post by ChoccieMuffin »

oelgoetz wrote:
ChoccieMuffin wrote:I've managed to get the footer for each topic to display at the bottom of each page (thanks to Scott De Loach at MadWorld Europe!)
Hi Muffin, Hi Scott,

could you please share the "Sticky footer" story here with us, please? Or - in case you did already - can you provide a link to it?
It was a long time back and my HTML5 stuff has been put out in the long grass, but I think the previous post in this thread should have most of what you're after.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
oelgoetz
Propeller Head
Posts: 41
Joined: Wed Jun 23, 2010 8:04 am

Re: Stopping body proxy content from showing behind fixed fo

Post by oelgoetz »

Thank you Muffin,

this thread is indeed enough to get it running!! Thank you!!
In my case it was a bit more complicated, because I use a Top Navi Output, so the width and the position of the footer bar must be corrected too.
But adding the rule left: auto; to the #footer style does the job.
Post Reply