Bug #51575
Updated by Volker Theile almost 3 years ago
The banners, e.g. to notify users to update their password or the enable the telemetry plugin, have a hardcoded fixed height of 37.6px. This makes it impossible to display more than one line in them. Additionally the calculation of the position of ALL components rendered in the navigation component is calculated by the component itself via CSS. This is a not so good approach, instead each component is repsonsible for itself to calculate and render in the correct height/size. Using a flex layout, e.g. by using @angular/flex-layout component, will fix that. Finally it requires additinal code changes in the navigation component CSS to add another banner type; adding <cd-foo></cd-foo> to the navigation HTML should be enough, the rest is done by the flex-layout automatically.
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss#L111
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss#L262
This code here should be replaces as soon as possible by using a flex layout that will do that job automatically.
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts#L103
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts#L63
!screenshot1.gif!
!screenshot2.gif!
As you can see on https://ng-bootstrap.github.io/#/components/alert/examples, the banner automatically increases the height when the view gets to small to display the message in one line. This behaviour is prevented by the current implementation of the navigation component.
Additional references:
https://github.com/angular/flex-layout