Highlighted

Sticky Footers

Mentor ,
Jul 21, 2018

Copy link to clipboard

Copied

If you're using our Harmony Page Builder tool or Bootstrap 4 (which sadly does not come with a Harmony-like automated UI) you can easily craft a sticky footer. See tutorial:

Harmony Sticky Footer

Note that this technique will also work with floated columns in the content areas, but once you explore the power of Flexbox, we're sure you will discard floats like yesterday's newspaper

Views

720

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Sticky Footers

Mentor ,
Jul 21, 2018

Copy link to clipboard

Copied

If you're using our Harmony Page Builder tool or Bootstrap 4 (which sadly does not come with a Harmony-like automated UI) you can easily craft a sticky footer. See tutorial:

Harmony Sticky Footer

Note that this technique will also work with floated columns in the content areas, but once you explore the power of Flexbox, we're sure you will discard floats like yesterday's newspaper

Views

721

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 21, 2018 1
Adobe Community Professional ,
Jul 21, 2018

Copy link to clipboard

Copied

I do it a little differently in Bootstrap 4.  To clarify terms a bit, this is not to be confused with the "sticky" class in Bootstrap which positions an element at viewport top but only after you scroll past it.  

https://getbootstrap.com/docs/4.0/utilities/position/#sticky-top

This example pushes footer to viewport bottom on short pages where there is very little content.   Tested in latest FF, Chrome, MS Edge and IE 11.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 bottom footer </title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

body {height: 100vh;}

.flex-grow {flex: 1 0 auto;}

</style>

</head>

<body class="d-flex flex-column">

<nav class="navbar bg-dark text-white">Navigation goes here</nav>

<main class="container flex-grow">

<h1 class="p-1">Hello World!</h1>

<h2 class="text-danger">Welcome to Bootstrap 4</h2>

</main>

<footer class="bg-dark text-warning text-center">

<p class="p-2">On short pages, footer hugs bottom of screen.</p>

</footer>

<!--jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
Mentor ,
Jul 21, 2018

Copy link to clipboard

Copied

I'm really confused. Your method is essentially the same as mine, but includes thousands of lines of irrelevant code. What exactly are you trying to do? Teach code or push Bootstrap?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
Adobe Community Professional ,
Jul 21, 2018

Copy link to clipboard

Copied

I'm using built-in Bootstrap classes.  For example:  <body class="d-flex flex-column"> 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
Mentor ,
Jul 21, 2018

Copy link to clipboard

Copied

I guess you're not going to answer my question. Sorry I stepped on your bootstraps . Let's just cut it right here nd let folks decide if my little tutorial is worth it... without interference or confusion. 'Kay?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
Adobe Community Professional ,
Jul 21, 2018

Copy link to clipboard

Copied

I didn't bring up Bootstrap, you did

"If you're using our Harmony Page Builder tool or Bootstrap 4 (which sadly does not come with a Harmony-like automated UI) you can easily craft a sticky footer. See tutorial:"

In fairness to both sides, I merely showed how one could do it with Bootsrap 4.  If that confuses you, I'm sorry.  It was not meant to be anything but informational.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
Mentor ,
Jul 21, 2018

Copy link to clipboard

Copied

Since this thread is utterly destroyed...

I cited Bootstrap because Adobe is:

1. Using it as if it were a drug

2. It is ruining the web

3. It is not actually part of Dreamweaver

And yet...

The Dreamweaver support forum has dissolved into a chaotic mess of Bootstrap fanboys (or girls) and angry voices who do nothing but bicker over the importance of either Bootstrap or manual coding, neither of which is indicative of the vast majority of Dreamweaver users and why they use Dreamweaver.

But...l really don't expect you to respond... or even to understand my point.

I have better things to do with my weekend... thank God

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
LEGEND ,
Jul 22, 2018

Copy link to clipboard

Copied

ALsp  wrote

The Dreamweaver support forum has dissolved into a chaotic mess of Bootstrap fanboys (or girls) and angry voices who do nothing but bicker over the importance of either Bootstrap or manual coding, neither of which is indicative of the vast majority of Dreamweaver users and why they use Dreamweaver.

Well I'm not a Bootstrap fan as you know BUT I am somewhat in favour of being able to manually code, or at least know what the heck the code you are using is doing/how/why it works. Whilst extensons and plugins and all that stuff can be of help there comes to a point when an extension or plugin doesnt do exactly what is required. It is at that point that having a bit of code knowledge makes all the difference...that obviously depends on how discerning the developer is....maybe the majority of those that use DW as you say are a bit amatuerish and dont require much beyond what an extension or plugin can provide..........maybe.

Its hilarious to follow the Wappler forum where a group of about 5/6 are posting and if the program doesnt do it can't seem to work out how to implement it themsleves and I'm talking simple things like not being able to hook up Font Awesome to the page....these people are waiting for an extension from DMX to do that before they can proceed any further..........no coding required

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2018 0
Mentor ,
Jul 22, 2018

Copy link to clipboard

Copied

I do not disagree with you, Osgood. When we make tools, part of our testing process involves demo pages that integrate into our site. For instance, the menus on our home page and interior pages are made with our tools. It is at this stage of development that we find the most flaws, issues, and features to add. Not many companies do that, certainly not Adobe. All of which we do can obviously be hand-coded, but they are truly timesavers... even for us... and I consider us to be quite proficient coders . So, we make tools that can be used by coders and non-coders alike. It's the chief reason that the Harmony CSS file is 11.5K (uncompressed) versus 187K for Bootstrap (uncompressed).

We are tolerant and respectful of people who like to code... or at least tweak code. And we make our products easy to accommodate that.

What I am intolerant of is Bootstrap, from qualitative, logical, an practical angles . It is used by coders who either pretend they are coders, or who have become too lazy to code. It is so very obvious.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2018 0
Adobe Community Professional ,
Jul 22, 2018

Copy link to clipboard

Copied


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2018 0
Mentor ,
Jul 22, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

Nice picture.

There is nothing inherently wrong with being lazy about certain things. Bootstrap is other people's code. The CSS is several thousands lines long, whether you use it to drive a single page site or a thousand-page site. Some large companies embrace it because it is easier to recruit developers who use it, rather than developers capable of writing custom code. If Bootstrap were inventory, everyone using it would be bankrupt .

This is not about you. This is about one coder's (me) opinion -- an opinion which is not at all uncommon in the business today.

I don't know you well enough to think you are shallow, and based on observing this forum for a number of years, I don't consider you an ignoramus. But none of that can ever change my opinion that Bootstrap is a waste of time and code.

I told the dearly departed Dreamweaver product manager during the Spry era, that if they spent the time and resources to make Spry efficient, fix the bugs, and clean it up, that we would extend it. It is such a logical thing to do for an extension developer.  We would do the same if Bootstrap were efficient. We would simply use Bootstrap instead of writing the code ourselves.

Because Dmxzone uses Bootstrap carries no  weight for me. If PVII made a Wappler-type product (which we have no plans to do) I can assure you the generated code would be as clean and efficient as we could make it. Kind of like we do now .

So I would amend your caption to read like this:

Produced using Wappler, Bootstrap 4, and several hundred Kilobytes of unused CSS and JavaScript.

Now I'm going to enjoy the rest of my evening, and wake tomorrow to check this thread. It should be fun to stop posting and study human nature for a bit .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2018 0
Adobe Community Professional ,
Jul 22, 2018

Copy link to clipboard

Copied

Another nice picture, this time of one of the originals.

Donald Booth


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2018 0
Mentor ,
Jul 23, 2018

Copy link to clipboard

Copied

Donald Booth. Despite the Spry debacle, I hope he's found a happy and prosperous niche.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Adobe Community Professional ,
Jul 23, 2018

Copy link to clipboard

Copied

Actually, it was Spry that taught me the relationship between HTML, CSS and JS and gave me an understanding of the workings of widgets.

Back on topic, I have used Nancy's Bootstrap approach for Sticky Footers. Unfortunately, using my current editor, the workflow has forced me to use your solution, albeit in a slightly modified version as per

html,

body {

  height: 100%;

}

body {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

}

main {

  -webkit-box-flex: 1;

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

}

footer {

  -ms-flex-negative: 0;

  flex-shrink: 0;

}

Is there still a reason for using the prefixes? Some articles use min-height: 100vh; instead of height: 100%;. So far I have not noticed the above code to malfunction in the browsers that I have tested. With your knowledge, please explain.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Mentor ,
Jul 23, 2018

Copy link to clipboard

Copied

In the sticky footer example, height 100% will work just fine. Essentially, vh comes into play if the <html> and <body> elements are set as overflow:auto. Space taken by scrollbars is not subtracted from the viewport, whereas it will be subtracted if set as overflow:scroll. Using min-height over height is again related to overflow. If, for example, you had a child element you wanted to scroll separately from the body. It works around bugs in IE10/11 as well as in Chrome.

Prefixes are not needed for flex... at least in my testing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
ALsp LATEST
Mentor ,
Jul 26, 2018

Copy link to clipboard

Copied

And thanks to this discussion, we have been inspired to produce a new Page Collection.

Typecrafters

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2018 0