Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Hy
I'm having some trouble with flex in IE:
http://jsfiddle.net/EvvBH/
Notice that the #two element has flex: auto, which is supposed to expand it to fill the container, even if there's not enough content.
But it does that only in Chrome and Firefox. In IE it simply doesn't work.
is flex-grow not supported by IE ?
In Case someone is trying this not on body but some child div.
You can just set height: 0; on the element with the min-height.
IE just wants any height on the parent element of the flex-grow auto element.
So it could look like this:
.flex-parent{
display: flex;
min-height: 300px;
height: 0;
}
.flex-child{
flex: 1 1 auto;
}
IE requires flex: 1 1 auto
it doesn’t understand flex: 1
This happens because you use the min-height on the <body> to get full height. For internet explorer, you need to use the height property (use 100% or 100vh).
Not really sure what you're trying to achieve but that's not how the Flexbox layouts work. To use the 'flex' property on an element it needs to be within a parent element which has the 'display:flex' property.
<style>
#flexContainer {
display: flex;
}
#item1 {
width: 50px;
background: #66CC33;
flex: 1;
}
#item2 {
width: 50px;
background: #0099FF;
flex: 5;
}
#item3 {
width: 50px;
background: #66CC33;
flex: 10;
}
</style>
<html>
<div id="flexContainer">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>
</html>
I will use -ms-flex: 1 1 auto;
Because IE has not full support for flex. Should be with prefix.
Related
Yesterday I faced a CSS issue which seems to be related to mat-drawer and Angulars router-outlet. I have got a fullpage flexbox with two children. A mat-toolbar at the top and a custom component app-sidenav at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:
<div class="flex">
<mat-toolbar></mat-toolbar>
<app-sidenav></app-sidenav>
</div>
The related css is
.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }
In the app-sidenav component I now have the following template
<mat-drawer-container>
<mat-drawer></mat-drawer>
<mat-drawer-content>
<main><router-outlet></router-outlet></main>
</mat-drawer-content>
</mat-drawer-container>
And the related styles are
mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }
This works fine and the height is appropriate unless there is no content larger than the app-sidenav height. The scrollbar appears at the outer flexbox component and not at the main-tag. I also tested !important at the heights and also 100vh but with no success. So how can I get the overflow-y at the main tag working?
I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help.
Cheers!
Edit:
I made a stackblitz for this issue. When you navigate to the ciao component you see that the scrollbar appears at the document root and not in the main tag.
In addition to #Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.
app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
Try this for main css class
main {
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
}
This worked for me!add it to style.scss:
.mat-drawer-inner-container{ overflow: hidden !important; }
if it doesn't work for you, try below in style.scss:
*{ overflow: hidden !important; }
<mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
<mat-drawer #drawer mode="side" class="toolbar">
<app-sidenav></app-sidenav>
</mat-drawer>
<router-outlet></router-outlet>
</mat-drawer-container>
Above code just worked for me, when I put style directly and use autosize so that mat-drawer-container will not overlap on the router page.
It will add two scrollbar. One for main page scroll and another scrollbar is for the mat-draw which slide from left. The mat-draw will have its own scroll bar. Just like the screenshot.
.mat-drawer.mat-drawer-end {
position: fixed;
overflow: auto;
}
Beside having long page i can see the mat-draw on the top with its own scroll. I hope this helps with minimal code require to achieved what we want.
So this issue is making me scratch my head. I have a fiddle where the code works exactly how I expected it to.
But I have similar if not the same code implemented here, and you'll see because I have more text it's causing the first flex-item's width to adjust itself.
I'm still new to flexbox, but I've been doing a bunch of reading on them, maybe I got something wrong in the css? I don't see how since the fiddle works but the real example doesn't.
CSS
.comment-meta-body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 30px 0;
border-bottom: 1px solid #eee;
}
.comment-meta-text {
font-size: 12px;
line-height: 20px;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
EDIT
flex-basis of 70px seems to make it work, but I still don't understand what's happening with the live example, in the fiddle I've tried setting a width to the parent container trying to replicate it but I can't. The fiddle works perfect. Doing some more testing, in the live example, if I set a max-width on the tag that's less than the width of the container, by let's say 100px, it looks fine too.
In the web you have this css for the images:
img {
width: 100%;
height: auto;
}
In the fiddle you haven't and the image uses its original size.
This question already has answers here:
How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
(3 answers)
Closed 7 years ago.
I have discovered what I believe to be a bug in Firefox versions 34 and above with regards to the behavior of display: flex.
I can confirm the code has always worked in all modern browsers, and still does, but Firefox 34 and the recent Firefox 35 beta, the behavior is totally inconsistent.
I have created a fiddle that demonstrates the different behavior: http://jsfiddle.net/ntkawu63/
Launch that in Firefox 34+ and it will ignore the max-width: 100% on the image. In any other browser, including Firefox 33, it will apply the max-width to the image and display normally.
<style>
.mediaContainer
{
zoom: 1;
overflow: visible;
position: relative;
}
.mediaCenterContainer
{
display: flex;
justify-content: center;
align-items: center;
}
.imageContainer
{
margin: 0 auto;
}
.imageContainer img
{
margin-bottom: 10px;
max-width: 100%;
}
</style>
<div class="mediaContainer mediaCenterContainer">
<div class="imageContainer">
<img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
</div>
</div>
Is there something wrong with this code, or is this something that should be raised as a bug with Mozilla?
Edit—the original answer was not fully correct
The important aspects here are
The "flex item" div.imageContainer needs a positive flex-shrink value
The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
In accordance with the W3C flexbox spec*, the flex item needs some kind of definite size constraint, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer; otherwise, in accordance with the spec, the .imageContainer must take its content's size, i.e. the full 1000px intrinsic size of the PNG image
OP's question already satisfied point 2, but not points 1 and 3. Here is the CSS which I used:
.mediaContainer
{
overflow: visible;
width:100%;
}
.mediaCenterContainer
{
display: flex;
}
.imageContainer
{
flex-shrink:1;
min-width:1px;
}
.imageContainer img {
max-width:100%;
}
… and here's a fiddle demonstrating it.
Many thanks to #dma_k for pointing out the error in my original answer.
*I usually hate linking to W3C specs, but this section is actually quite readable; I'd encourage people to read it.
Original answer
Firefox 36 (currently dev preview) gives the behaviour you expect if you constrain the div rather than the img. You can do this using flex-shrink:
.imageContainer {
flex-shrink:1;
}
… or the short-hand flex property:
.imageContainer {
flex: 0 1 auto;
}
… or using the max-width declaration you had placed on the img, but also on the div:
.imageContainer, .imageContainer img {
max-width:100%;
}
So Firefox allows flex elements to overflow their containers. I don't know the flexbox spec that well, but it seems natural that this would be the case; that's why the flex-shrink property exists.
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I replace the image tag src value through css ? and i want support in ie8 ,firefox ,chorme,safari
<div class="any">
<img src="images/i.png"/>
</div>
replace this src value through css only.
Thanks
try setting a background image and then moving (with padding) out of the box the original image
something like this...
EDIT i had to tweak it a bit to have it working...
.any img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://placehold.it/150) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
... and here is the working example
http://jsfiddle.net/nNaRn/1/
You can't change the src tag of the image with CSS, because the image src is nothing to do with CSS.
The closest you can do is set the background image of the div and get rid of the img tag altogether:
.any {
background-image: url('images/myimage.png');
}
Beyond this, you will need to use Javascript.
You cannot change the src through CSS. Although what you can do is define a blank div, and give it a width, height, and background-image through CSS. The only drawback with that approach is that the element will not behave like an image for the user (drag/drop, rightclick to save, etc.).
div.any {
width: 200px;
height: 200px;
background-image: url('./some-url-that-you-can-override-by-another-stylesheet');
}
The only thing that you can do is to set background-image to .any and display:none to img but you will need to set also width and height of the div, since div without content have width of 100%, and height of 0.
.any {
width: 300px;
height: 300px;
background-image: url(image/1.gif);
}
.any img {
display: none;
}