Defect #30467

Footer is not placed at the bottom on pages with little content

Added by Anonymous 10 months ago. Updated 2 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.1.0
Resolution:Fixed Affected version:

Description

I'm opening this as a placeholder for now to upload the patch later.
If the decision to remove wrappers will be accepted in #30448, then there will need to be changes to the #main, else if all the wrappers will stay, then there will need to be the changes to the #wrapper.

#footer is however going to receive same rules for both approaches. :)

full_height_layout.diff Magnifier (2.02 KB) Bernhard Rohloff, 2019-08-27 13:06

patched_login_screen.png (22.6 KB) Bernhard Rohloff, 2019-08-27 13:15

original_login_screen.png (22.6 KB) Bernhard Rohloff, 2019-08-27 13:15

Associated revisions

Revision 18427
Added by Go MAEDA 2 months ago

Footer is not placed at the bottom on pages with little content (#30467).

Patch by Bernhard Rohloff.

Revision 18446
Added by Go MAEDA 2 months ago

Don't use ^= operator to target the wrapper elements (#30467).

Patch by Marius BALTEANU.

History

#1 Updated by Jean-Philippe Lang 10 months ago

What is the purpose of making the footer sticky? I don't see anything in the footer that needs to be always visible.

#2 Updated by Anonymous 10 months ago

Jean-Philippe, apologies for vague description, what I mean by setting footer sticky, is for it to stick to the bottom of the page, while always expanding the #main block (or a wrapper) in 100% of available vertical height, unless the page's content needs more space.
I think it would be better than having footer ending up in the middle of the screen on pages where there is little or no content.
For reference please see the concept-gridbox-version.html file in the #30451#note-6 and click "Insert Lorem ipsum" button multiple times while observing the footer to see what I propose :)

#3 Updated by Marius BALTEANU 10 months ago

  • Subject changed from Set footer sticky to Have footer stick to the bottom on pages with little content

#4 Updated by Bernhard Rohloff 3 months ago

Here is a patch for the base layout to fill the visible space entirely. The footer always sticks to the bottom until the page is bigger than the visible height. It's quite pleasing for my eyes. The footer doesn't jump anymore when changing views.

Original login view

With the patch applied

#5 Updated by Marius BALTEANU 2 months ago

  • Target version set to Candidate for next major release

Bernhard, I've tested your patch in several browsers (including IE 11 and Edge) and it works very well, nice job.

I would love to see this fixed in 4.1.0 along with #30435. It's very annoying to see the footer and the sidebar ended at 600px when there is not too much content in the page.

#6 Updated by Bernhard Rohloff 2 months ago

  • Target version changed from Candidate for next major release to 4.1.0

I had a chat with Go and it's OK for him, so LGTM! :-)

#7 Updated by Go MAEDA 2 months ago

  • Tracker changed from Patch to Defect
  • Subject changed from Have footer stick to the bottom on pages with little content to Footer is not placed at the bottom on pages with little content
  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch. Thank you for your contribution.

#8 Updated by Marius BALTEANU 2 months ago

  • Status changed from Closed to Reopened

I think it's safer to target the wrapper elements by their id instead of using "starting with":

Mariuss-MacBook-Pro:redmine mariusbalteanu$ git diff
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index d5f1762e3..00ca660f0 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -11,7 +11,7 @@ h4 {border-bottom: 1px solid #ccc; font-weight:normal;}
 pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}

 /***** Layout *****/
-div[id^="wrapper"] { min-height: inherit; }
+div#wrapper, div#wrapper2, div#wrapper3 { min-height: inherit; }
 #wrapper {background: white;overflow: hidden;}
 #wrapper3 { display: flex; flex-direction: column; }

@Bernhard, do you see any problem with this change?

#9 Updated by Bernhard Rohloff 2 months ago

Marius BALTEANU wrote:

I think it's safer to target the wrapper elements by their id instead of using "starting with":

[...]

@Bernhard, do you see any problem with this change?

No, you're right. wrapper is quite generic and could be used in more places.
I think it should be changed this way.

#10 Updated by Go MAEDA 2 months ago

  • Status changed from Reopened to Closed

Marius BALTEANU wrote:

I think it's safer to target the wrapper elements by their id instead of using "starting with":

[...]

@Bernhard, do you see any problem with this change?

Committed the fix in r18446. Thanks.

Also available in: Atom PDF