Button Location - Bottom of Page - Layout = Atlas_TopBar

0
I opened this as a followup to my orginal question: Original Question How to force a button to appear at the bottom of a page. Proposed Answer Use the following class: .button-return {     position: absolute;      bottom: 0% !important;     left: 1% !important; } New Issue This works fine for page layout: Atlas_Default. However, due to menu display issues, I changed all page layouts to: Atlas_TopBar. Depending on where I place the close button, I get the following issues: Inside Layout Grid – displays directly after the last row (this was the original issue). Inside Container – doesn’t display at all. After the last Layout Grid – doesn’t display at all. So, it seems that Atlas_TopBar is not exposing the page footer…? - is there any CSS code I need to add to override the layout, or do I need to modify the layout directly? - I can’t find any reference (in the documentation or Studio Pro) to maintaining / modifying a layout. Is the layout maintenance function done outside Studio Pro? I’m sure the answer for this is right in front of my eyes … :-( Since I’ll need to place other elements in the footer area, suggestions re navigation alternatives (e.g. breadcrumbs, pop-ups, etc) would not be applicable to the broader problem of placing elements at the bottom of the page. 
asked
2 answers
0

so it seems like what you want:
if pagecontent is not fullheight = place button at bottom of page.
if pagecontent is fullheigt or bigger = place button at bottom of content.

the best way to do this would be with flex boxes, unfortunitly the current atlas layouts are not made with flexbox, so you’d have to rewrite the layouts.

or just accept that the button is under your content, or in a fixxed location.

 

answered
0

Hi! Not a CSS-Guru here.

I had a similar issue as you had when using the proposed answer. In cases where it did not work for some reason, I used the following instead. Not quite the same but works for my use case.

.bottomRight {
  position: fixed;
  top: 90%;
  left: 90%;
  transform: translate(-49.9%, -49.9%);
  z-index: 1; }

answered