Ngx-chart height issue in Safari - angular

I have a problem with a ngx-chart in Safari. I have them with height: 100% so it fits the available space and I also set a min-height so it has at least a desired height.
This image taken in Firefox/Chrome:
screenshot shows that it works on any other browser.
I'm probably doing something wrong but this is how it is shown on Safari in either Mac, iPhone or iPad: iPhone screenshot
Any ideas of what is going on? Thank you in advance!

You could try the vh (viewport height) unit in your min-height style as below,
<div style="width: 100%; min-height: 100vh">
...
</div>
Another option would be to use calc() as shown below,
<div style="width: 100%; height: calc(100%);">
...
</div>

Related

Firefox not scaling img with max-width

I find that img descendants of flexbox positioned items with max-width: 100% rule doesn't work on firefox.
I've tryed the solutions from:
Firefox 34+ ignoring max-width for flexbox
and,
Firefox flexbox image width
As the code is quite long I wrote a pen: http://codepen.io/vandervals/pen/raXBNj
As you can see in this pen, this is a problem for small sized screens. I found a not very elegant solution:
img{
max-width: 500px;
width: 100%;
}
The problem with this approach is that we lose the global use of the rule max-width: 100% for every image, no matter the actual dimensions of the image.
Has anyone solved this problem?

How to put div's with 100% width next to each other

I want to place any number of div's with 100% width side by side without using margin/padding/left.
So I want to have an overflow-x
<div class="pages">
<div class="page page_1 shown">1</div>
<div class="page page_2">2</div>
<div class="page page_3">3</div>
//... much more div's
</div>
Do you have any ideas?
Sorry for my very bad english... :/
Contrarily to what the others think, it is possible. You can use the vw (viewport width) unit.
http://jsfiddle.net/BramVanroy/90t997aa/
body {
width: 300vw; /* 3x the viewport */
}
.page {
width: 100vw; /* every page has the width of the viewport */
float: left;
}
Here is the browser support table.
EDIT: I just realised you could simply set the body width to 100*n % where n is the amount of divs you have. Then set the divs' width to 100/n %. Like so. Browser support ought to be better this way, but some browsers might not round off the numbers all too well, causing some pixel differences.

Responsive element wider than parent width/wrapper width

I would like my images to be displayed wider than my wrapper/parent width but still be responsive with the browser window size. Currently, my wrapper width is 500px.
I'm able to achieve wider images by:
<p style="margin-left: -25%; margin-right: -25%;">
<img alt="My wide image" style="width: 100%;" src="wide_image.jpg"/>
</p>
The above gives an image width wider than parent/wrapper width, but, the image doesn't scale with the browser window; instead, the wrapper/parent width scales correctly, and a horizontal scroll bar appears in the browser to navigate the image from left to right.
Thank you in advance. :-)
Edit: added missing double quote as Elliott Post pointed out.
Edit2: the answer shown here scales the image with respect to the browser window, however it obscures text after the image and is the full width of the page rather than 25% extra on each side: Is there are way to make a child DIV's width wider than the parent DIV using CSS?
Edit3: Here is a modified jsbin from Roko C. Buljan: http://jsbin.com/sumoqigo/1/edit
A quick fix for older browsers is to simply add overflow-x:hidden; to your body element.
Talking about responsiveness and modern browsers, if you don't want to have parts of your images hidden by the body overflow...
you could use media queries to achieve the desired:
jsBin demo
First add a class to your image:
<img class="wideImage" src="image.jpg" alt="My image"/>
Than the following CSS:
.wideImage{
width:150%;
margin-left:-25%;
}
#media(max-width: 750px){ /* 25%of500px=125; 125*2=250; tot=750 */
.wideImage{
width: 100vw; /* vw is the CSS3 unit for Viewport Width*/
margin-left: calc( (-100vw + 500px) / 2 );
}
}
#media(max-width: 500px){
.wideImage{
width: 500px;
margin-left:0;
}
}

Images with width/height percentages showing up stretched

I have about 15 images, one after the other, formatted as so:
<div class="foo">
<p>
<img src="img.jpg">
</p>
<p>
<img src="img.jpg">
</p>
...
</div>
CSS:
.foo img {
height: 75%;
width: 75%;
}
This has shown up in every browser I've used, even some older IE versions, but it wasn't until I was using a friend's Macbook that I viewed the site and the images were extremely stretched out. It is an older OSx version (10.5.8), but both Chrome and Safari have the images stretched out.
I'm trying to get each image to show up 75% smaller than it is. The images vary in size.
Is it possible to fix this without manually resizing each image?
Found the answer:
Use only width:100%; on the image and remove height: 100%;. This will
tell the browser to resize the image in a way to respect the 100% of
the width, or more like, fix your width then stretch your legs.
Thanks for the help though
Can you try this,
.foo img {
min-height: 100px;
min-width: 100px;
}

Responsive Images won't Scale with Firefox as screen size is adjusted. Works in other Browsers

I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:
img {
max-width: 100%;
width: auto;
height: auto;
}
As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.
Anyway, I got things to work by overriding the image width a Firefox specific directive like this:
/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
#-moz-document url-prefix() {
img {
width: 100%;
}
}
I don't think I should have to do this, and googling doesn't seem to come across this issue.
This is the default CSS that is used for responsive Images:
img {
max-width: 100%;
height: auto;
width:100%;
}
And this is the indispensable Javascript: Bongard.net
Thanks to David Bongard for the Javascript.
Now add the following to the "if safari" rule of the Script:
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;
This works for me
#-moz-document url-prefix() {
img{
width: 100%;
max-width: 100%;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
img{
max-width: 100%;
}
}
I have similar problem, and found out setting max-width on the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:
http://jsfiddle.net/CLUGX/ (demonstrate the issue on Firefox)
http://jsfiddle.net/CLUGX/1/ (uses max-width on wrapper to fix the issue)
http://jsfiddle.net/CLUGX/4/ (demonstrate that responsive sizing works, try resizing inner frame)
Before max-width:
After max-width:
One thing to note, however, if you happens to set padding on wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):
Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue.
If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers
Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:
img {width: 100%;}
Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!
It works both for Google, Firefox and IE. Cheers!
I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.
No:
img {
max-width: 100%;
height: auto; }
Yes:
<img src ="image.jpg" style="max-width:100%; height:auto;">
If anyone can shed some light of wisdom on this, please do.
I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.

Resources