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.
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'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.
I have a simple link that a user clicks on when they need to get a password reminder:
<a ng-click="forgotPassword()">Forgot your password?</a>
I tried this but it does not seem to work. I would like the functionality of a link, the look of a link (with an underline appearing on hover) but do not want to have the /# appear in the bottom of the browser when I hover.
Can anyone suggest some ways that I could achieve this with AngularJS?
Use a <span class="link" ng-click="forgotPassword()"> tag. Style it with text-decoration: underline; cursor: pointer;, the color you like, etc.
I am new to Bootstrap and Angular. In my webpage there is a button and i am providing a popover for a span like this
<span popover="Download Project History" popover-trigger="mouseenter" tooltip-placement="top" style="padding: 5px" translate="DOWNLOAD">DOWNLOAD</span>
But its getting hidden under navbar.
Based on my googling i found to provide data-container="body" in the html element. But its not working too.
Can anyone please help me?
Thanks
I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:
popover-append-to-body="true"
tooltip-append-to-body="true"
attaches the tooltip to the body and makes it visible.
You need to override the z-index value, you can have a look for the default values (for navbar and popover) in original Bootstrap's CSS file. In my case this helped:
.popover {
/* just in case it would overlap with fixed navbar, then show this over the navbar. Original value 1010, value for navbar is 1030 */
z-index: 1030;
}
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}