I can't reduce size of textarea using mouse although I didn't specify minimum width and height. In Firefox everything is ok. This question was asked here: Can't reduce size of resizable textarea in Chrome, but I couldn't find suitable answer, maybe someone can help me.
This is my mark up:
<textarea id="textarea" name="textarea"></textarea>
and CSS:
textarea{
width: 90%;
height: 400px;
border: 2px dashed black;
border-radius: 12px;
background-color: transparent;
font-family: Purisa;
font-size: 23px;
padding: 5px;
margin: 20px auto auto auto;
outline: none;
border-color: black;
}
Google Chrome has a some kind of restriction to show content properly to user. Because of that they edited the default actions of resizing on <textarea>. In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to set min-height and max-height only. Height overrides min-height in Chrome.
Here is a simple fiddle: http://jsfiddle.net/gAr72/1/
Edit:
You can see Firefox will work same as Chrome in this fiddle. Height is risky for design btw. Unlimited resizing always breaks the design. So limiting height and width is good option.
Related
I am facing the same issue mentioned in Unwanted white space on mobile version and as per the solution there, I looked for the elements which are 100% width and having padding. For such elements, I gave box-sizing: border-box; like below but the issue persist.
input[type=text], input:focus {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 27px;
resize: vertical;
margin-right: 5px;
margin-left: 5px;
height: 35px;
box-sizing: border-box;
}
Can any one help me how to debug trough inspect, which element is blowing out. I could not figure out by looking at inspect element, computed styles.
looks fine in vertical view -
Issue in horizontal view -
https://jsfiddle.net/vky60wz7/1/
Because max-width is defiened as 540px
see here
if you disable this it will be ok
You can try two things. first instead of width, give a min-width. Second, check that the parent elements display is not affecting this.
When adding a border-radius on an iFrame's parent div, the border doesn't perfectly fit the iFrame, even when they are assigned the same width and height values.
I've added arrows pointing to the visual gaps in the resulting image below. Screenshot is from the latest version of Chrome (March, 2016).
HTML Code:
<div class="mapFrame">
<iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&output=embed" width="500" height="400"></iFrame>
</div>
CSS Code:
.mapFrame
{
border-style: solid;
border-width: 6px;
border-color: #ffffff;
box-shadow: 0px 0px 20px #000000;
margin: auto;
border-radius: 80px;
overflow: hidden;
width: 500px;
height; 400px;
position: relative;
}
Result:
Have you tried .mapFrame iframe {border: none}? From my computer (also latest chrome), it appears to be the default iframe border. You might also consider making the iframe display:block as inline elements tend to have line height and letter spacing that throws off pixel exact rendering.
Border radius isn't well supported or consistent yet. If you want the desired effect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors technique if you're iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
I have a box with padding and border. The image is sometimes too large to fit. I'd like to display the box without distorting the image (crop is fine) and keep the padding and border (matte). Here is an example:
http://jsfiddle.net/n236vh2u/
Notice the bottom padding is overwritten by the image? I tried setting z-index: 2; on the outer <a> box, setting box-sizing: padding-box;, setting two borders border: 5px solid white, 1px solid #ccc;, but none of those worked.
Split up your styles over both the div and the a:
JSFIDDLE
CSS:
#gallerysingle {
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
}
#gallerysingle a {
display: inline-block;
max-height: 100px;
overflow: hidden;
}
#gallerysingle img {text-align:justify;}
You can use the clip property on the image.
#gallerysingle img {
text-align:justify;
position: absolute;
clip: rect(0px, 100px, 100px, 0px);
}
Note, that it has to be positioned absolute for doing so. Therefore you will have to set the height of the a tag fixed to 100px.
#gallerysingle a {
overflow:hidden;
display: inline-block;
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
height: 100px;
}
See it in action – jsfiddle
Update
To answer the question of browser support for this property, i did some more research:
Being a CSS 2.1 property, clip browser support appears to be fairly good. This MDN page says it is working in all major browsers since way back.
I've also done some testing on mobile showing it works with android 4.1 stock browser and mobile firefox as well as ipad 1 safari.
Also note, that this property is deprecated. MDN suggest to use clip-path instead. But apparently browser support for clip-path is not sufficient yet. So i would stick to clip for now until clip-path is widely supported. The syntax for clip-path appears to be the same, just exchange the property name.
I am loading images of various sizes and dimensions into my website.
Chrome, Opera and Safari all stretch the image so, that it doesn't look unnaturally stretched or skewed.
Firefox keeps the width of the original image and sets the image height to 100px.
This results in 50x100, 150x100 and 2000x100 images.
On the left side you see Chrome, on the right one you see Firefox.
I want all images to be exactly 100px high.
The image class looks like this
img.image-message {
padding-bottom: 2px;
height: auto;
width: auto;
max-height: 100px;
max-width: 100%;
}
Setting only height and width doesn't change a thing:
img.image-message {
padding-bottom: 2px;
height: 100px;
width: auto;
}
View live example at metahill.com.
You can use this user to login:
Username: test_t
Password: meta_hill_t
Hm, I think I've identified the root of your problem in the CSS. It actually isn't directly a style of the <img> element, which is what made it so hard to pin down. It lies in this definition in chat.css:
#chat .chat-entry > .chat-entry-message {
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:box;
padding: 3px;
word-wrap: break-word;
}
The problem you see in Firefox relates to the display: -moz-box, which, as explained by Mozilla, causes children (such as the <img> elements you're having trouble with) of the styled element to grow to fill their parent. Changing the definition to something like:
#chat .chat-entry > .chat-entry-message {
display: block;
padding: 3px;
word-wrap: break-word;
}
will fix the observed problem, though I'm not sure if all those variants of display: box were there for some other purpose. (So I can't say if this fix will affect anything else.) Anyways, hope this is what you were looking for! If not, let me know and I'll be happy to try helping further!
Set the height to 100px, not the max height. The width will follow automatically to the height unless specifically declared.
I want to create the layout of this textbox:
The one for email (or where he's writing his phone number) using HTML5 and CSS3.
The problem is the requirements for this textbox:
it has to be responsive (width: 100%)
I don't want anything on hover (no need for the bottom border to become blue)
I don't want to use JavaScript
Any suggestions? I tried several ways but I'm always having problem.
The problem you were having is that an element's width is composed of the defined width plus the padding (of both sides) and the border-width (of both sides).
To work around this, in compliant browsers, use the box-sizing property set to border-box (which includes the padding and border-width inside the defined width), therefore:
.textbox{
border: 0;
border-bottom: 1px solid rgb(160,160,160);
background-color: transparent;
width: 100%;
margin-left: -1px;
margin-right: -1px;
/*padding-left: 5px;*/
float: left;
}
Needs to have the following added:
.textbox {
/* the above not changed, the following added */
padding-left: 2em; /* an arbitrary dimension to demonstrate, adjust to taste */
box-sizing: border-box;
}
JS Fiddle demo.
References:
box-sizing.