I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.
If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.
Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.
I have tried this CSS from research:
.highcharts-container {
width:100% !important;
height:100% !important;
}
But this screws up the tooltip on Chrome and other browsers too.
Any sugegstions welcome.
in addition to your rest of css apply max-width: 100%; to your div like below
.highcharts-container {
max-width:100%;
}
Related
Hi i am having some troubles while trying to "fit" an image inside a css grid container (The problem only happends while using Safari, Firefox and Chrome is ok.) Problem is, the img height while using Safari takes all the available space and this makes the image looks deformed (Below is the link to the screenshot I took)
These are the properties I am applying to the image:
img {
flex-basis: calc(66.67% - 3.6rem);
width: 66.67%;
margin: 0 auto;
}
Link to screenshot
You may try re-defining the height of the image as the same problem occurred with me and by re-defining, it worked for me on safari. And also instead of giving the width and height in percentage, give it in pixels as it will be more convenient.
I'm trying to use a canvas animation effect, it works well on firefox (desktop) but on mobile it fills like little space on top left corned of the page. On mobile chorome works well, updated my browser still not working, wonder if there is any trick making it work.
code
https://codepen.io/riazxrazor/pen/Gjomdp
here is the html file on separate server:
http://ntf.r-control.eu/canvas.html
Not posting code here, becouse it not display properly (goes out the code tag somehow)
Not able not to understand your doubt. But, you can try
canvas{
height: 100vh;
width: auto;
}
it will force your canvas to be the height and width of the viewport.
I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired width.
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
I'm working on a school project, and I have to create a simple presentation webpage. The problem is that the webpage doesn't work as expected in Firefox, while in Chrome and othet WebKit browser it's all fine.
My problem is here: http://c303.usv.ro/~HPC/ (please don't change the language in English, as you will not be able to see my problem). If you go to "Echipamente" in Chrome, you'll see that the "#content" div has some nice scrollbarls and the footer stays at the bottom. If you'll do that in Firefox, the scrollbars no longer appears and the footer seems to go somewhere under the visible part of the webpage. As a workaround I use:
function mozillaFix(){
return; // we shouldn't use this
$('#content').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
$('#leftmenu').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
}
but I guess that this is not the mos elegant solution. Where could be the issue?
Set the max-height with Javascript to the desired height (I tested it with FireBug to with max-height: 400px;). Then, Firefox will make a nice scrollbar, and show the footer as you wanted.
As found on the internet, the solution is defining the height of the container of the div. If you have the following CSS it should work:
html, body {
height: 100%;
}