Stopping body proxy content from showing behind fixed footer

This forum is for all Flare issues related to styles, stylesheets and XML.

Stopping body proxy content from showing behind fixed footer

Postby ChoccieMuffin on Wed Sep 26, 2018 8:55 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby AlexFox on Thu Sep 27, 2018 3:32 am

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.
AlexFox
Sr. Propeller Head
 
Posts: 127
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Thu Sep 27, 2018 4:10 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Thu Sep 27, 2018 4:16 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby AlexFox on Thu Sep 27, 2018 7:23 am

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.
AlexFox
Sr. Propeller Head
 
Posts: 127
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Postby MadCapDan on Thu Sep 27, 2018 11:52 am

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

Postby MadCapDan on Thu Sep 27, 2018 12:26 pm

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!
MadCapDan
Jr. Propeller Head
 
Posts: 2
Joined: Wed Sep 26, 2018 6:08 pm

Re: Stopping body proxy content from showing behind fixed fo

Postby AlexFox on Fri Sep 28, 2018 1:37 am

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.
AlexFox
Sr. Propeller Head
 
Posts: 127
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Fri Sep 28, 2018 8:52 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby AlexFox on Mon Oct 01, 2018 12:34 am

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.
AlexFox
Sr. Propeller Head
 
Posts: 127
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Mon Oct 01, 2018 2:22 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby AlexFox on Tue Oct 02, 2018 2:18 am

No reason you can't put it in the masterpage :)
AlexFox
Sr. Propeller Head
 
Posts: 127
Joined: Thu Oct 19, 2017 1:56 am

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Fri Oct 05, 2018 3:42 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby oelgoetz on Thu Feb 20, 2020 6:17 am

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?
oelgoetz
Propeller Head
 
Posts: 33
Joined: Wed Jun 23, 2010 8:04 am

Re: Stopping body proxy content from showing behind fixed fo

Postby ChoccieMuffin on Thu Feb 20, 2020 6:37 am

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 2019r1.
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: 2324
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Stopping body proxy content from showing behind fixed fo

Postby oelgoetz on Sun Feb 23, 2020 3:56 am

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.
oelgoetz
Propeller Head
 
Posts: 33
Joined: Wed Jun 23, 2010 8:04 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 6 guests

cron