Closed dfenerski closed 7 months ago
Hello @dfenerski , Thank you for sharing this finding. I've created an internal incident DINC0050225. The status of the issue will be updated here in GitHub. Regards, Lidiya
Hello @dfenerski ,
Thanks for the issue.
Here you can check out the documentation of the sap.m.NavContainer: NavContainer
As you can see this container control has the following short description: Handles hierarchical navigation between Pages or other fullscreen controls.
Pages being sap.f.DynamicPage, sap.uxap.ObjectPageLayout, sap.m.Page etc.
The grid which you are trying to insert as "page" is not considered a page nor has fullscreen semantics.
You can wrap your grids in sap.m.Pages and you will achieve your target design easily.
Using the !important
keyword is considered bad practice. And in the case of not using the Nav Container as intended, it's definitely not worth the risk of backward incompatibility or regressions.
Either wrap your grid in a sap.m.Page
or use another container control as a whole. You can check out FlexibleColumnLayout.
Hope this helps, Plamen Ivanov
OpenUI5 version: latest
Browser/version (+device/version): any
URL (minimal example if possible): https://jsbin.com/petinonaho/29/edit?html,js,output
What is the expected result? With regards to what children a
What does "page semantics" mean? Does it have to extend
sap.m.NavContainer
may have, the documentation is somewhat vague:sap.m.Page
? Does the outer DOM element of the control have to be adiv
? Or at least not have owndisplay
CSS Prop?What happens instead? If one puts inside a control which easily can occupy a full page (and therefore be argued about that it has page semantics) but has custom
display
prop, thesap.m.NavContainer
will display both controls at once.This is so, because the
NavContainer
does not remove hidden DOM elements, but just assigns.sapMNavItemHidden
to them. In the theme library, there is this rule:However this does not guarantee the item will be hidden. If a page control has custom css class, altering its default
display
prop, or if as in the example above the control does indeed render its owndisplay
prop, its specificity beats the one of the library CSS rule.To account for those,
!important
can be added to the lib css rule.