When you open the chart in full screen mode it works as expected: chart is being displayed on the whole screen, but when you exit full screen the original chart stretches to a much bigger height. You can test it here:
https://jsfiddle.net/9b6m438y/
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
How to reproduce: Open context menu in upper right corner of chart, select "View in full screen", then exit the full screen mode and pay attention to the height of the original chart.
How to avoid this?
It is a controversial thing if it is a bug or not because different browsers different works in the current full-screen module implementation - you can see the whole discussion here: https://github.com/highcharts/highcharts/issues/13222
As a workaround (suggested under the above link) you can set the container height in the CSS.
Demo: https://jsfiddle.net/9b6m438y/
#container {
height: 400px;
}
If you have your own opinion about it - feel free to take part in the discussion on the GitHub issue ticket.
I had the same problem in higharts#8.2.2.
Reading the comment below the question, I decided to upgrade highcharts to 9.1.0.
the problem is completely solved in this version.
because of the major update (8 to 9) my code confronted with few problems that can easily be handled. Hope it works for others too.
Related
I want to just show pure icon image in TabBar
but in iOS, it's displayed like this.
but original images are below.
I think it is basic in IOS. I want to remove the color or to set be transparent.
Is it possible?
I tried to change tabsStyle for some test below.
tabsStyle: {
tabBarBackgroundColor: '#000',
tabBarButtonColor: '#fff',
tabBarSelectedButtonColor: '#fff',
}
Left image is work but Right image is strange.
Environment
React Native: "0.55.2"
react-native-navigation: "^1.1.438"
Platform: iOS
You can use tabStyle . For e.g
tabsStyle: {
tabBarBackgroundColor: '#fff',
tabBarButtonColor: '#fff',
tabBarSelectedButtonColor: '#fff',
}
It's solved.
I'm using react-native-navigation "v2" now.
This is working properly.
I have implemented react-native-maps from here:
https://github.com/airbnb/react-native-maps
It was loading the map, my markers were showing correctly until last week. All of a sudden the map view is just blank now. It's just showing a red border and nothing else.
The only thing I have changed last weekend is the name of my project. I have then tried everything I could find online but it's still not working.
Things I have tried:
1. react-native link
2. Things mentioned in the issue here: https://github.com/airbnb/react-native-maps/issues/118
I have the recommended stylesheet for map
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
And the render method looks like this:
<MapView
style={ styles.map }
region={this.state.region}
showUserLocation={true}
>
I still see a blank screen. I would really appreciate some help here.
Thank you.
It worked when I killed the current npm process and reset my cache.
I searched through the docs but could not find a post discussing this.
I'm currently working on a project which's both available for mobile and pc browsers. Since the screen on iPhone is very small, I'd like to disable highcharts interaction on it (the interaction would fail me even scroll down the page).
I would like to ask whether there's any parameter like "hasInteraction:false".
Thanks for any kind of tips!
update:
I tried this code from Ricardo Lohmann and it's working to disable the mouse tracking:
plotOptions: {
series: {
enableMouseTracking: false
}
}
But on mobile device it's still blocking my finger scrolling down. I searched on Google and found a post: http://blog.rafael.jp/post/2958719820/div-mouseenabled-false but still not working (to allow the chart not blocking my finger scroll)
I'm looking for a solution to this as well.
More precisely, I'd like to enable page scrolling even when finger starts dragging on the chart. I'd still like that a touch on a data point opens up a tooltip.
You might be interested in this commit from v3.0.4 "Added new option, tooltip.followTouchMove ...". I still have to try that. I tried that on iPhone simulator and it works:
Somewhere in your HTML page:
<script type="text/javascript" src="//code.highcharts.com/3.0.1/highcharts.js"></script>
Later on, when you create the chart in your JavaScript code:
$('#chartdiv').highcharts({
chart : {
type : 'line', // e.g. for a line chart
zoomType: null, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
tooltip: {
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
// other options...
});
plotOptions: {
series: {
enableMouseTracking: false
}
}
demo
plotOptions: {
<your type of chart, for example "spline">: {
enableMouseTracking: false
}
},
May fix your problem
I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.
I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.
How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?
If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.
EDIT:
I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.
In the end I've been able to solve the problem by using this snipped of code:
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
$('iframe').wrap(function() {
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
}
The code above was found here: http://home.jejaju.com/play/iframe-scroll.html
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.