I have a table that has image in one of its column:
In Firefox and IE, the image always as big as the original size, making the td expands beyond it's specified width.
Here's the Codepen.
When creating the codepen, I realized that Chrome actually has the same issue, but fixed by this part of normalize.css:
img, object, embed {
max-width: 100%;
}
Some solution that I have found is adding table-layout: fixed on table. But it only fixes the issue if my table doesn't have checkbox. It behaves weirdly otherwise (you can try it on the Codepen).
Any other solution?
An easy fix for this would to target the images width as displayed below, versus targeting the width of the td tag:
CSS:
img {
border: 0;
display: inline-block;
vertical-align: middle;
width: 95%;
height: auto;
}
This is demonstrated in the following demo and should fix your problem with IE and FF browsers.
DEMO
Related
I have a help box component that can contain text and in its natural state is collapsed. Text overflow is hidden using text-overflow: ellipsis; When clicking on it, it expands and displays the whole text.
I cannot get it to work in a dynamically sized container. It works fine otherwise.
Please see the following JSFiddle where the code is reduced to its essentials:
https://jsfiddle.net/gmbt76or/
The first helpbox is displayed correctly and is not wider than the display area. The second helpbox is inside the dynamically sized container and is not restricted in its width at all.
Can you please answer me what I have to do to get the second help box to behave like the first one? Naturally I cannot use any fixed widths.
Thank you very much in advance!
Adding min-width probably solves the problem:
.ui-g {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
min-width: 0px; /* add ths */
}
.ui-g-12 {
width: 100%;
float: left;
box-sizing: border-box;
min-width:0px; /* add this */
}
Only two lines to add to your OP code.
https://jsfiddle.net/9aq34rt7/
Resize the browser window see it adjusts. Hope this solves the issue in actual code.
found a nice article explaining the issue: https://newbedev.com/css-text-overflow-ellipsis-not-working
While viewing your code in JSfiddle, I just modified your .ui-g-12 class css
.ui-g-12 { width: 100%; }
to
.ui-g-12 { width: calc(100vw - 47px); }.
I hope it will fullfill your expectation.
Code: JSFiddle
Thanks.
I have a problem with this one in Firefox:
https://codepen.io/anon/pen/dJpwEj
For some reason it shrinks in Firefox, like it can't calculate the height.
Both Chrome and Edge shows it correctly but for Firefox to show the same result I need to set height to 90vh like its parent.
css as follows: changing height: 100% to 90vh works. But I dont understand why.
.themes-outercontainer
{
position: relative;
display: table;
width: 100%;
height: 90vh;
}
.themes-container
{
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Your .themes-container is overriding by a display: flex, so your display: table-cell is not applied. You can't manage height property on this way when you use flexbox attributes.
The other problem is that .themes-whiteoverlay is position: absolute so the height doesn't work as you expected.
Please, try to think what's your preference: flexbox or table, and try to remove absolute positioning if you don't know how it works.
Unlike other browsers, Firefox doesn't assume the actual height of the screen, so it has to use viewpoint height units to figure that out. The only exception to this I believe is the body element
For instance, let's say that you're given a question in Math. The teacher wants you to find what 50% of an unknown number is. How would you do that? You can't, so you have to ask for the number.
I'm working on a large form and have noticed that if an image is within a fieldset it doesn't obey the max-width: 100% rule.
It works as expected in Chrome and Safari but in Firefox the image overflows the container and the image keeps its normal size.
I would prefer to not make changes to the html structure and keep the images inside the fieldsets.
Anyone have any ideas if there is a workaround or why this only happens in Firefox?
simple example
http://codepen.io/FernE97/pen/NPZKaR
For purely CSS solution, check this link http://codepen.io/saig/pen/RNXLwY
Tested with 800x400 and 400x400 image sizes
img {
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
height: auto;
}
You can check this link for max-width implementation by MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples
You can try this workaround, width property defined. use max-width to overrides width property
img {
width: 100%;
max-width: 100%;
height: auto;
}
Edit : Please check this url : http://codepen.io/anon/pen/PwrWQK
I've added script which dynamically changes max-width property based on image dimension, hope this helps to fix your issue in Firefox.
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
This may seem like a blast from the past but due to project constraints I am stuck with quirks mode and tables...
The tables that i'm dealing with have a single image in each cell where all the cells should be the same size. The tables width and height are set as percentages of a parent container.
The problem is the images don't resize down, they stay at their original size seemingly no matter what I do. Then the table doesn't adhere to its set size, it has resized to hold all of the images. In standards mode I believe 'width: 100%' on the image gets closer to what I want to achieve.
I'm considering a javascript solution which loops over each image calculating what their size should be and resizing manually. But this is probably going to cause a bit of a loading time at the start which isn't ideal.
Edit:
I have written a basic example at JSBin. What I want to achieve is to be able to set the size of the table and have the images resize, whether growing or shrinking to their cell.
The 4th jsbin revision uses the dummy images.
I think I've solved this.
I've tested this demo in Chrome, Firefox, Internet Explorer, Safari, Opera; they all render consistently.
I had to add a wrapper div in each cell. I know this isn't awesome, but it had to be done to make it work in Chrome.
I added table-layout: fixed to make it work in Internet Explorer.
Live Demo
CSS:
#mycontainer {
width: 300px;
height: 300px;
border: 1px solid red;
}
#mytable {
height: 50%;
width: 50%;
table-layout: fixed;
}
#mytable div {
width: 100%;
height: 100%;
}
#mytable img {
width: 100%;
height: 100%;
}
HTML:
<div id="mycontainer">
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td><div><img src="http://dummyimage.com/28x28/000/fff.png&text=Dummy" /></div></td>
...
</tr>
...
</table>
</div>
I have solved my problem via JavaScript. I couldn't find a way to make all the browsers play nice without forcing them.
I basically loop over each image checking what their parent tables size was supposed to be, then divide that by the number of rows to find the image height and by columns for width.