Is there a way to constrict how far a <textarea> can expand? Or a way to format a <table> so that it doesn't look bad when you expand a <textarea>?
The only way I know is with the resize css property. It is a CSS3 property so it may not help you if you are dealing with older browsers.
Try applying this class to your text areas...
.noresize{
resize:none;
}
Use max-height and max-width for the style of textarea. This will prevent the textarea to be expandable.
Note: IE doesn't know max-width and max-height. but you can do something like this:
textarea{
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
If you do not want resizing completely then put a "resize:none;" style attribute on the textarea. If you want resizing in a controlled way then add something like max-width: 300px;
max-height: 250px; to the text area style.
textarea {
resize: vertical;
width: 350px;
min-height: 80px;
max-height: 200px;
}
Using this code, the user can resize the textarea vertically. Applying max- and min-height prevents the layout from breaking.
Related
input::-ms-clear {
display:none;
}
IE11 input width changes when clicked -
this solution works for clicking the text box
Changing the text in text box changes the width in IE 11
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution
Please change the css
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt
width: 98%; to width:100%
It will work. All the best
It look like it is a bug in IE you can use margin on the child element.
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
So change your percentage based padding to px or em based wil fix the problem.
https://jsfiddle.net/3TwKF/22/
padding: 2px .5em;
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 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
I am having a page where i give max-height max-width property to image element. It is working fine in chrome and firefox but not in ie-7.
Try this css
*max-height:400px;
*max-width:400px;
like that
MAX width working in IE-7 according to Microsoft check the link below
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning
But you have to set appropriate doctype
*+html #div {
max-height: 300px;
max-width: 300px;
}
use this code ... i think its useful for you............
Is it possible to set the width of the tag "legend" at 100% in FF? In spite of all my efforts its length stays equal to the containing text.
I don't believe it is, no. Firefox 3.5 sets the following style on legends:
width: -moz-fit-content !important;
which, thanks to the ‘important’, is impossible to override (min-width and position are similarly affected).
display defaults to inline, but you can set it to block and nest a <span> inside it which you can then set to display: block; width: something;. But not 100% as that relies on the width of the legend (gah). The only way I can think of to truly get 100% would be to relative-position the fieldset and absolute-position the span inside the legend with left: 0; width: 100%;.
(Which is very ugly and potentially fragile.)
<legend> is always a tricky element to style in many browsers: its typical default rendering can't be done with plain CSS, so the browsers cheat in various ways that can bite you if you try to change the rendering too much. If you want to control the positioning of the element that specifically, you are probably better off forgetting <legend> and just using a styled <div>.
works on all browsers:
LEGEND { position: relative; width: 100% }
edit- check out this gem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/
Firefox from version 3.6 onwards honours { width: 100%; }. There appears to be no CSS-only fix for Firefox 3.5 (see bobince's answer).
set css width on fieldset
fieldset { width: 100%; }