I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.
Related
I have a modal window that is draggable. I want to disable the backdrop completely. I know that the uibModal has a backdrop property that I can set true/false or static - but that is not enough for me, I want the html content from the background still be clickable for example Google Sheet Help modal window - you can open it, drag it and still work in the background.
How can I disable the backdrop completely and make the content from the background clickable with the modal open? Is this possible with the uibModal or should I just create a modal window in plain javascript/iframe?
I can make the background clickable with this CSS:
.modal {
pointer-events: none;}
.modal-backdrop {
display: none;}
The problem with this is that it kills the draggable functionality because you can no longer click on the modal(only background is clickable).
I resolved my problem with jQuery UI
$(document).ready(function(){
$("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})
As you guys can see I set my ID for the div that I want to be draggable and I also set a containment for the body of the page so people can't move my div out of the view(body) and turned off scrolling. After that I set a handle - this is where you set the draggable part of your div(if you want the whole div to be draggable just remove the handle option) - I set the #header as my handle(top menu bar) - this way people can click inside the draggable div without accidentally moving it. If you want this to work for you, all you need is jQuery and jQueryUI.
This works like a charm and I am very happy!
In addition to CSS mentioned in the question, add pointer-events: all; to modal's content container. Worked for my uibModal.
I am building something with angular material. One of the pieces is to have some tabs, and stuff them with some useful information. Right now I am doing that, and populating one of the tabs with some directives in an ng-repeat. The only problem right now is the tabs are cutting off the elements, and I am unable to scroll downward.
Here is my html (slim)
md-content.md-padding
div.registered-events[layout="row" layout-align='space-between center' layout-wrap]
card-small.persona-card-result[object='e' ng-repeat='e in events()']
I can post my stuff about the styles of the elements in these tabs, but I don't think it's them that is causing the issue. I have tried the md-dynamic-height directive, adding relative to the parent and absolute to the children, etc, and still no luck.
Does anyone know how to add more height and make the md-tab-content scrollable?
fixed this by adding this to the parent element, and the tab's parent element. The tabs were further down the chain (grandchildren elements)
scss
.grandparent {
overflow: hidden;
.parent {
overflow-y: auto;
// tabs would've been here
}
}
Is it possible to make the whole card a link in Angular material or is there another directive intended for this use case?
You can just put a ng-click on the card and perform your operation.Further you can style the card with hover effects to get the feel of a link.Like this :
HTML:
<md-card ng-click="cardSelected()" class="cardAsLink">
....
</md-card>
JS:
$scope.cardSelected=function(){
console.log("card Clicked");
}
CSS:
.cardAsLink{
cursor: pointer;
}
.cardAsLink:hover{
border : 1px solid blue;
}
Yes you can put an anchor tag around the card. I think it is the better solution because you have the hole functionality of the anchor tag. In Ramblers answer clicking would work fine and if you use the the router the historie would also be korrect, but thinks like clicking with the mouse wheel to open a new tap would not work. The same goes for right mouse click thinks and the navigation preview on the bottom of the browser would also be missing.
Currently when an element is hidden via ng-hide, first the element gets display="none" then the animation happens. Is there a way for display="none" to be added once the animation is finished?
The common suggestion is to add a display: block !important rule for the .ng-hide-add , .ng-hide-remove classes. The add and remove versions of hide class are added by ng-animate and removed after the relevant animation.
Sources: https://docs.angularjs.org/api/ng/directive/ngHide
http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show
I have a button in AngularJS. It's in a row of other buttons. How can I show and hide this button but still have it use space? I tried using ng-show but then when the button is hidden it uses no space and all the other buttons around it move.
In your CSS, target the element like this:
.my-element.ng-hide {
display: block!important;
visibility: hidden;
}
(You might want inline-block or something else for the display, the important part is to override the none default value of ng-hide)
You can then use ng-show="showMyElement" as an attribute as per usual