Footer Width

matt_redpath · Post by **matt_redpath** » Thu Nov 10, 2016 4:54 am

Hi folks,

I'm trying to modify the out-of-the-box Flare 12 HTML5 template to include a footer on every page - not just the home page.

I've created a <div> class (div.Footer) in the MainStyles stylesheet, and applied it to a <div> element on the OtherTopics master page.

I've put it as far down as I can, right above the closing </body> tag, so that (hopefully) it doesn't inherit anything that might screw it up.

I've set the following on the class :-

div.Footer
{
background-color: #4e296d;
clear: both;
width: 100%;
}

Despite this, it never fills the page! - It always aligns with the rest of the content on the page, which (out-of-the-box) is more centred.

How can I get round this, so that the footer fills the width of the page, like the header?

Many thanks in advance.

Best wishes,

Matt

devjoe · Post by **devjoe** » Thu Nov 10, 2016 11:31 am

Check the formatting on your body element. I suspect you have a fixed width for that body element which is causing your stuff to be that particular width, which is going to prevent what you are doing from working because the div you want lives inside this body.

We have a similar thing on our welcome topic, a full-bleed background box around the heading, though it is at the top of the page instead of the bottom and it uses the h1 tag instead of a div. With some of the irrelevant font formatting removed, here is what that looks like:

body.welcome
{
max-width: 100%;
border: 0px;
margin: 0px;
}
h1.welcome
{
width: 100%;
background-color: #49a5e3;
background-image: url("../image/Landing_Banner.png");
background-repeat: no-repeat;
background-position: left center;
margin: 0px;
margin-bottom: 40px;
padding: 0px;
padding-left: 30px;
padding-top: 39px;
border-bottom-width: 4px;
border-bottom-color: #cecece;
border-bottom-style: solid;
}

matt_redpath · Post by **matt_redpath** » Fri Nov 11, 2016 8:27 am

Thanks devjoe,

After investigating the css in Chrome, I discovered a class of <div> named "row outer-row". It contains everything in my Master Page.

So even though I put my footer right at the bottom of the Master Page, it's still inheriting from this <div> class - including its fixed width.

Does anyone know how I can move my footer outside this <div>?

I thought this sort of structure was defined in the Master Page, but it must be coming from somewhere else...

Many thanks,

Matt

Post by **NorthEast** » Mon Nov 14, 2016 1:02 am

The default top nav skin has some left/right padding.
In the skin Styles tab, set the property Global > Main Page > Padding > Left/Right to 0.

matt_redpath · Post by **matt_redpath** » Mon Nov 14, 2016 9:38 am

Thanks Dave.

More than the padding, I reckon the Max Width of 62.5em is the culprit!

I'll have a play and report back.

Cheers,

Matt

arshabhirai · Post by **arshabhirai** » Thu Jun 29, 2017 8:25 am

Matt, Did you manage to resolve this issue?

matt_redpath · Post by **matt_redpath** » Fri Jun 30, 2017 1:49 am

Hi arshabhirai,

Gosh, this feels like a long time ago.

My online output project was put on hold, so I've not returned to this for some time, and have forgotten a lot of the details.

However, I did end up with the footer I wanted, more or less.

Cheers,

Matt

arshabhirai · Post by **arshabhirai** » Tue Jul 18, 2017 8:25 am

matt_redpath wrote:Hi arshabhirai,

Gosh, this feels like a long time ago.

My online output project was put on hold, so I've not returned to this for some time, and have forgotten a lot of the details.

However, I did end up with the footer I wanted, more or less.

Cheers,

Matt

Thanks for the reply, Matt.

We have two different style sheets, one for the homepage and other for rest of the document. The footer in the homepage works correctly, but the footer width in rest of the documentation is limited to the centre. I have to spend more time on this bug to figure it out.

arshabhirai · Post by **arshabhirai** » Thu Aug 31, 2017 11:57 am

If anyone faces this issue, here is a simple solution that worked for me:

After the closing body tag

Code: Select all

 </body>

, use the footer tag:

Code: Select all

<footer>content</footer>

, that's it!

Code: Select all

<html>
   <body>
     Some content
  </body>
  <footer>
    Footer content
  <footer>
</html>

PeterSol · Post by **PeterSol** » Sun Oct 08, 2017 11:13 pm

Thanks arshabhirai, does that make the footer auto reponsive to browser size and screen widths?

arshabhirai · Post by **arshabhirai** » Thu Oct 12, 2017 1:34 pm

PeterSol wrote:Thanks arshabhirai, does that make the footer auto reponsive to browser size and screen widths?

The footer in our docs is responsive. I did make some changes to the divs and classes inside the footer, so you may have to do the same. Let us know if it worked for you.

Corinna · Post by **Corinna** » Wed Oct 25, 2017 8:32 am

Although this solves the problem of stretching the footer across the full width of the viewport, one should be aware that the body (or some other element automatically generated by Flare/Foundation) is set to 100 vh min-height, thus pushing the footer out of the visible area of any screen - regardless of resolution or length of topic.

Unfortunately, Flare does not seem to support the calc function, which could help with positioning the footer when its height is known.

I am still looking for a workaround for this.

arshabhirai · Post by **arshabhirai** » Wed Nov 15, 2017 8:09 am

Corinna wrote:Although this solves the problem of stretching the footer across the full width of the viewport, one should be aware that the body (or some other element automatically generated by Flare/Foundation) is set to 100 vh min-height, thus pushing the footer out of the visible area of any screen - regardless of resolution or length of topic.

Unfortunately, Flare does not seem to support the calc function, which could help with positioning the footer when its height is known.

I am still looking for a workaround for this.

You have to add the class that Flare/Foundation automatically sets to 100vh in your stylesheet, and then customize it to your needs. It does require a bit of investigation to identify the classes/ids.

ArdisRamey · Post by **ArdisRamey** » Wed Nov 21, 2018 1:23 pm

Can anyone offer any more clarity regarding what these classes are? After applying this fix, I'm so close to realizing a fully-functional result. This will really bring it all the way across the line for me.

If it helps, I'm working with HTML5 side-nav output in Flare 2018 (not r2).

AlexFox · Post by **AlexFox** » Wed Nov 28, 2018 2:57 am

I ran into this a few times and there are a few threads floating around about it.

As has been identified in this thread you should not use <footer> tags in your MasterPage, this does not have the intended results (for me it hid the body text behind the footer!).

@Ardis, the row outer-row class is generated from the Main Page padding in the skin editor as mentioned by Dave.

The only 100% reliable workaround I ever found was to set the Main Page padding mentioned above to 0 then in my relevant MasterPage, add a <div> block with padding of 1em, place the <MadCap:bodyProxy /> inside this then immediately after the closing </div> tag, add my footer (stored in a snippet). This made the footer occupy the full width of the content page (as per the 0 padding in the skin editor) and the body content pad to 1em.

I'm on Slack if you want to message me about this for clarification

Post by **NorthEast** » Wed Nov 28, 2018 3:58 am

Alex - Ardis is using a side nav skin, so the solution is a bit more complicated than it would be for the top nav skin (which this thread was talking about).

ArdisRamey wrote:Can anyone offer any more clarity regarding what these classes are? After applying this fix, I'm so close to realizing a fully-functional result. This will really bring it all the way across the line for me.

If it helps, I'm working with HTML5 side-nav output in Flare 2018 (not r2).

Ardis - Åsa Sundin posted her solution on Slack, so maybe try that out yourself.

https://madcapflareusergroups.slack.com ... 2642294000

AlexFox · Post by **AlexFox** » Wed Nov 28, 2018 4:40 am

Ah, the requirement here is for the footer to cover the sidenav also? Then definitely use the Slack solution

ArdisRamey · Post by **ArdisRamey** » Wed Nov 28, 2018 11:57 am

Yes, the Slack solution looks like the right path forward. Thanks, all!

candeelh · Post by **candeelh** » Mon Dec 10, 2018 10:44 am

I have the same issue with my Side Nav layout. I attempted to open the link provided for the Slack solution, but it is asking me for an @madcapsoftware.com email address, which I do not have. How does one go about getting a madcapsoftware email address.

Thanks!

Post by **Nita Beck** » Tue Dec 11, 2018 5:58 am

candeelh wrote:I have the same issue with my Side Nav layout. I attempted to open the link provided for the Slack solution, but it is asking me for an @madcapsoftware.com email address, which I do not have. How does one go about getting a madcapsoftware email address.

Thanks!

Send me a PM with your email address and your location and I’ll send you an invitation to join. The Flare Slack community is by-invitation-only because we are trying to keep out spammers and email harvesters.

For anyone interested, here’s the original forum post when the Flare Slack community launched in 2017: viewtopic.php?f=13&t=29380&p=132166. (For anyone keeping score, we’re up to 545 members as of December 10, 2018.

kstewart · Post by **kstewart** » Fri Nov 01, 2019 12:32 pm

Dave Lee wrote:Alex - Ardis is using a side nav skin, so the solution is a bit more complicated than it would be for the top nav skin (which this thread was talking about).

ArdisRamey wrote:Can anyone offer any more clarity regarding what these classes are? After applying this fix, I'm so close to realizing a fully-functional result. This will really bring it all the way across the line for me.

If it helps, I'm working with HTML5 side-nav output in Flare 2018 (not r2).
Ardis - Åsa Sundin posted her solution on Slack, so maybe try that out yourself.

https://madcapflareusergroups.slack.com ... 2642294000

Hi All: I'm looking for the solution to this issue that was posted on Slack, but it appears I'll need a paid subscription to Slack to go back that far. Could anyone send me the information for this footer solution with the SideNav skin? I'm also on Slack. Thanks.

https://app.slack.com/client/T5547PLBX/ ... /UPT8BAJ73

Post by **Nita Beck** » Sat Nov 02, 2019 2:17 pm

The Flare Slack community is free, but membership is by invitation. I can send you an invitation. Given that you’re a new forum member, you can’t yet send PMs here, so please go to my website (link is in my signature) and fill out the contact form. I’ll need your email address and location (e.g., continent | country | city).

JvdB · Post by **JvdB** » Mon Jul 06, 2020 2:11 am

Creating a full width (100% ) container inside a fixed width container

I'm not part of the Slack Community either, so I can't see the solution.

You can use CSS units vw (viewport width). IE9 and above has support for vw & vh css units.

I found this helpful:
https://coderwall.com/p/hkgamw/creating ... -container

And in case that link ceases to work, here is the HTML and CSS in a nutshell.

HTML
<body>
<MadCap:bodyProxy />
<div class="OnlineFooter">
Footer content
</div>
</body>

CSS
I edited my Online Footer div using the Text Editor, to include the following:

{
width: 100vw;
position: relative;
margin-left: -50vw;
margin-top: 100px;
left: 50%;
}

When I did not include the margin-top, it truncated my content (or rather, the content and my side menu went behind the footer). I may still play around with this margin. The original length also included a height of 100px, which I left out. My current issue is that now I've changed the div width, I can't see the footer content in the XML Editor, so I have to edit the code if things need fixing.

MadCap Software Forums

Footer Width

Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width

Re: Footer Width