There is an issue with text overflowing ui-bootstrap's popover on the Safari browser. The problem was initially seen on an iPhone with its narrow screen but also occurs on Windows7 running Safari 5.1.7. When a popover occurs outside the window, the horizontal scroll bar is enabled to view the element, however the text overruns the popover box. This issue does not occur either Chrome or Firefox. See Plunker
<button popover-placement="right" popover="On the Right blah blah blah blah blah blah" class="btn btn-default">button</button>
Ordinarily I wouldn't put a right popover on an element to the right, but again, this accurately depicts the problem I'm seeing on the iPhone with its narrow screen. It doesn't seem to be addressed in later releases of angular and ui-bootstrap either. Wondering if there is any work around short of rearranging my ui.
something like this?
plunker
.popover.right {
width: 100%;
}
I tested it on chrome and safari... looks fine to me.. just needed a small css tweak
Related
Using angular and material design, I notice that, when you focus an input and then click outside (on nothing particular):
on desktop, the focus is removed from the input
on mobile (android), the focus stays
This is really annoying on mobile, because having an md-autocomplete that is focused, the virtual keyboard slides up and take half of the available height. And there is no way to hide it, except to click on another field or a button!
I really can't understand why the mobile shouldn't behave like the desktop. Is there no way to loose the focus when the user clicks outside or select an element?
app = angular.module('App', ['ngMaterial'])
.config(function( $mdGestureProvider ) {
$mdGestureProvider.skipClickHijack();
});
I know this is already years old question, but in case anyone is the same problem. The $mdGestureProvider.skipClickHijack() worked for me.
I have an amchart in a div whose show/hide is managed by angularjs. Sometimes it charts data that's already in memory. When that is the case, the div opens, chart is rendered and the SVG in there has a width of 10. As a result the chart does not appear on screen. Resize the window a mite and the chart appears because amcharts is listening to resize events I guess. This I think is a known issue - I have seen some SO posts on them and I hope one of them will work for me. My suspicion is that the angular machine does not get cycles to run open the div before amcharts gets to draw its magic (just a hunch no solid evidence.)
Next, I added an event watcher
piechart.write(divs.chart_div.attr('id'));
divs.chart_div.on('yes', 'snowy', function(){ // same with 'shown','resize'
console.info('============= woah ========');
});
Now a strange thing happened. I see the following error stack in my console
Error: [jqLite:onargs] jqLite#on() does not support the `selector` or `eventData` parameters http://errors.angularjs.org/1.3.13/jqLite/onargs
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at jqLiteOn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11733:39)
at Object.JQLite.(anonymous function) (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11951:17)
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
at obj.controller.$scope.myExt.renderFunc (http://localhost:8100/directives/boxRenderers2.js:179:24)
at _render_it (http://localhost:8100/modules/dashboard/dashboard.js:246:30)
at $scope.showBox.deferred.promise.then.workarea.showChild (http://localhost:8100/modules/dashboard/dashboard.js:310:17)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28)
And that funky behavior is gone ! The chart appears if I click to redraw it out of cached data, hides when click again, and all good. No more bland background colored div to stare at!!.
However, if I change the watch to divs.chart_div.on('shown', function(){ then the event handler is not called and the chart does not appear when rendered out of cached data.
I wonder what's going on.
Looks like something (might be the armchart library?) is expecting jQuery to be available to bind to an event. Angular comes with jqLite, a stripped down version of jQuery so that's why you're getting that exception.
I'm guessing it's something here on this line.
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
Use the full version of jQuery instead to take care of that problem: http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm
I tried body {overflow: hidden} trick but it hides everything below "View Details and Buy" button. Checked the elements through Inspector and none seem to overflow. I can't exactly point out the issue. Same template is used for other pages and those are working fine.
Getting the scroll bar on this page:
http://www.satyatunes.com/web/index.php
The same template is used on this but it's working fine:
http://www.satyatunes.com/web/store.php
The welcome page is not responsive on mobile/ipads also.
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;
}
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview