Floating Footer in Flexible Column Layout

[julia-siegl]

Is this a bug, enhancement, or feature request?

Enhancement/ Bug

Describe your proposal.

When using the floating footer bar design in a dynamic page inside column layout, it would be great if each column gets is own footer toolbar instead of a overall footer toolbar spanning several columns to be in alignment with guidelines. Currently the code, e.g. used in example https://sap.github.io/fundamental-ngx/#/core/dynamic-page#layout:

<fd-dynamic-page-footer>
    <!-- page footer content goes here -->
        <div fd-bar barDesign="floating-footer">
            ....
       </div>
</fd-dynamic-page-footer>

leads to an footer that is spanned over multiple columns:

(source is library example)

Guideline:

(source)

Can you handle that on the application side

Implementing dynamic resizing/positioning on application side seems like a workaround.
Can use the 'normal' footer (here), which is placed as expected, but not ideal.

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

"@angular/core": "^17.1.1",
"@fundamental-ngx/core": "^0.49.0-rc.24",

If this is a bug, please provide steps for reproducing it; the exact components you are using;

• Check out library example:
  https://sap.github.io/fundamental-ngx/#/core/dynamic-page#layout

Did you check the documentation and the API?

yes, issue also in the documentation, API in bar did not change floating footer ( e.g. tried inPage, inHomePage, size)...

Did you search for similar issues?

yes, nothing found

[droshev]

@InnaAtanasova We need to check the design for the floating footer again. It looks like that i was changed.
Our floating bar is always displayed on the bottom of the page(with an absolute position) example - https://stackblitz.com/edit/1hqnwx

[InnaAtanasova]

Hi @julia-siegl you can add a very quick fix to your project by adding position relative to the dynamic page.
If you add

<ng-template #startColumn>
    <fd-dynamic-page [autoResponsive]="true" ariaLabel="Example Dynamic Page" style="position: relative;">
       ...
    </fd-dynamic-page>
</ng-template>

it will result to this:

[InnaAtanasova]

I also opened a PR that adds an input property to Dynamic Page for setting the relative position: #11678

It will be available with the next rc version.

[julia-siegl]

Hi @InnaAtanasova, thank you for providing this solution.
One remark, wouldn't it make sense to set the default positionRelative to true rather than false here to a) be in alignment with the guideline and b) since other bar / footer bar types (e.g. 'normal' footer here), are by default relative?

[InnaAtanasova]

here

Hi Julia, it makes sense what you wrote but since this is an existing component already used in many applications we don't want to break something on user's side. Our practice is to always keep the default behaviour as it was and add new functionality with props so the changes on applications side are minimal or none.