Title, draw icon, and top right links hidden on M3 beta layout

Anvil Q&A
1

I’m trying to work out how the responsive design works on the new M3 NavigationDrawerLayout works.

When I have the designer window full screen, I seem to lose the Title and Link placeholders that sit at the top of the layout page

image
image2486×700 38.3 KB

If I shrink the width of my browser down, it then shows both the title and right-aligned links sections

image
image1438×850 37.5 KB

The same behaviour is followed when I preview the published app - large window size, no title, drawer icon, or right-corner icons. Shrink the browser width down and they all appear.

Is this something I’m doing wrong, or something quirky with the layout template?

2

I’ve also been puzzled by that. Hopefully someone can explain why it works that way.

1 Like
3

It doesn’t seem quite right to me - but maybe it’s because I can’t visualise a fully populated page using this layout yet.

If anyone has any nicely populated examples using the M3 Beta layout that shows how this is meant to look, that would help :slight_smile:

4

Hi @mattstibbs and @jshaffstall,

The layout was built this way to follow M3 specs which had a different layout on mobile vs desktop screens. However, M3 has changed a lot of their specs since this was built and the Navigation Drawer is now deprecated.

We need to update how layouts work so they meet the new specs and are actually usable! There is an issue for this on the M3 Github repo.

4 Likes
5

Ah ha - thanks for that.

I presume in that case @brooke - would it would be better to start again and use the NavigationRailLayout, or should I just hold off using the M3 Beta layouts for now? (I’m starting some new projects at the mo hence deciding what to work with)