I'm using angularchart to create charts in my web application.
I have this pretty standard markup which works fine with firefox and chrome:
<div ng-if="visible">
<canvas height="20%" width="80%" style="width: 80%; height: 20%;" id="line_general" class="chart chart-line" chart-data="lineData" chart-legend="true" chart-colours="colours"
chart-labels="lineLabels" chart-series="lineSeries"/>
</div>
It works on every screen size and if you reduce the screen it automatically resizes.
However, on internet explorer (my version is 10) it doesn't work: it not only does not resize but the resulting graph is also blurred.
How can I solve that?
edit:
interesting enough, it seems the culprit is that ng-if in the outside div! By removing it it seems working fine on ie as well.
Nevertheless, I need that ng-if so simply removing it doesn't solve my problem...
Solved. Apparently it is due to the fact that ng-if actually removes the canvas from the html so, when updating the graph with new data, it somewhat does not update the size.
I created a style with
visibility:hidden;
in it and used the ng-class construct to actually just hide the canvas without actually removing it.
<div ng-class="visible==true ? 'chart-container' : 'chart-hidden'>
<canvas .../>
</div>
Related
I have a glitch with angular's ng-repeat directive. My HTML is as follow:
<ul ng-show="predictions" id="search-place-predictions">
<li ng-repeat="prediction in predictions">{{prediction.description}}</li>
</ul>
and $scope.predictions is an Array in my controller, that takes between 0 and 5 items. However, at each update of this array, I have a visual glitch of around .2 second where the PREVIOUS <li> are still displayed, and the <li> from the new version of the array are also displayed on top of it. No amounts of $apply() have been able to solve this.
EDIT: I have a transition: border-top .2s ease-out; style applied to my list items. When commented out, the glitch disappears.
It's not a bug, per se. Some browsers don't support animation, but angular will still delay hiding and showing by the animation length it detects in your CSS. Usually affects IE <= 9.
See this answer for ways to disable animations in angular.
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/
I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.
I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.
Is there anyway to make ng-grid responsive?
I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.
You can wrap a ng-grid with this same class and achieve the identical behavior:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).
I have a problem with ie7 z-index behaviour.
Opening this page with ie7, the dropdown menu (some sections have it, some other doesn't) falls behind the slider.
I tried to solve using z-index and position of the parent element, but couldn't fix the thing.
Do you have any idea how to make the dropdown menu stay in front of the slider?
Thanks.
Try wrapping the nav menu with an additional container, then give to the wrapping div a bigger z-index than the z-index used in the nav menu.
This is a known issue of IE7 reported HERE on 2006.
There's an article that shows the workaround that can be used to solve the problem.
Take a look HERE.
As an example imagine you have a div with id="menu" for your navigation menu, you should do something like this:
<div id="wrapper" style="position:relative; z-index: 1000;">
<div id="menu" style="position:absolute; z-index: 999;"></div>
</div>
I think you can easily adapt it to your website.
Now i don't have a copy of IE7 and i can't reproduce the problem, but you can try and that should fix your problem. If it doesn't i'll try to assist you furtherly.
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)