Clever Geek Handbook

Angular -Material is some way md-sidenav and main content can have focus

I am using Angular Material to implement a sliding navbar using a directive md-sidenav

.

index.html

<div flex>
  <md-content>
    <p>Here is content.</p>
    <a href="">Click Me</a><!-- I want to be able click this even when the sidenav is open!!! -->
  </md-content>
</div>

<div ng-controller="SideNavCtrl as sd">
  <md-sidenav class="md-sidenav-right md-whiteframe-z2"
   md-component-id="right"
   md-is-open="sd.rightSideBarOpen"
   md-sidenav-focus=>
    <md-content>
      <p>Side Nav content</p>
    </md-content>
  </md-sidenav>
</div>

This works great, but when the nav is open it takes two clicks to interact with the content in the main window. I understand this is the expected behavior with the Material stacked sheets paradigm, but this is not the behavior I want for this project. Interestingly, when the attribute is used md-is-locked-open

, the main focus and the seat are in focus.

+3


source to share


2 answers


You can override the background with the following CSS:

md-backdrop.md-sidenav-backdrop {
  display: none;
}


Although you can open a ticket on Github by requesting this feature as it might be something that needs to be inlined.

https://github.com/angular/material/issues

+3


source


to avoid losing background functionality (like hiding sidenav on click) it is better to use background-color:transparent

than changing display property



0


source






More articles:


All Articles