search

oblique-bit / oblique

An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components. Oblique, through its fully customizable master layout, takes care of the application's structure, letting you focus on the content.
https://oblique.bit.admin.ch
MIT License
56 stars 13 forks source link

Sticky component in responsive mode has no borders #102

Closed ice-blaze closed 1 year ago

ice-blaze commented 1 year ago

Hello Oblique team,

The sticky component has it's border disappearing when we are in mobile mode. https://oblique.bit.admin.ch/components/sticky Normal view image

Mobile view image

Was this behavior expected? (If yes then I have to override this behavior for my project)

c-saner commented 1 year ago

Hello,

Thank you for your report.

We'll look into this issue. Here is the ticket number on our internal system: OUI-2372.

Kind regards

gillerr commented 1 year ago

Hi @ice-blaze

This actually works as designed as the sticky component does nothing on mobile view. This means the borders don't delimit the scrollable area anymore and thus aren't shown. I do agree that the documentation could be improved in this regard.

The idea is to prevent valuable space from being blocked on a small screen. The sticky header and footer do reduce the usable area of the screen. While not a problem on a desktop, this can render an application inoperable on a mobile or tablet.

This component is a relic of a distant past where flexbox did not exist. Nowadays it is quite easy to achieve the same thing with more flexibility using flexbox. Moreover its name is confusing as it doesn't work like the position: sticky CSS property at all. This is why it has been deprecated with Oblique 10.3.0

ice-blaze commented 1 year ago

Erf we are using it x) But ok thanks for your explanations.