i found out the right answer (not to adjust text size on rotation !)
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
but being very naive to css how to use it inline ?
i used as follows, but it did not work
<html>
<head>
</head>
<body style ="-webkit-text-size-adjust: none;">
<font face="Arial" size="9";>< a href="mailto:subject= mysub&attachment=myatt.doc"> mail this< /a>< br/>< b>< i>Header< /i>< /b>< br/></ font>
</body>
</html>
The example you point to is a style on the html tag, not the body tag as you have done. I suggest you try:
<html style="-webkit-text-size-adjust:none;">
and see how that works. Or you can just put the style into your head section like so:
<head>
<style type="text/css">
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
</style>
</head>
Interesting trick, I haven't actually ever done this myself.
Related
For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.
They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.
I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.
Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header">
<img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left" />
<img src="head_images/ymca1.jpg" align="right">
</div>
<div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
<div id="content1"><img src="images/cent_loc3.jpg" vspace="5">
<img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10">
<img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6">
</div>
<div id="content2"><img src="images/jorg_loc3.jpg" vspace="5">
<img src="images/ren_loc3.jpg" width="240" height="216" vspace="10">
<img src="images/whit_loc3.jpg" vspace="5">
<img src="images/camp_loc3.jpg" vspace="5">
</div>
</div>
</body>
</html>
UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.
I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.
To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.
go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish
I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.
My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.
SCREENSHOT:
http://i51.tinypic.com/2rmxsfp.png
<!DOCTYPE html>
<html>
<head>
<title>Fade bottom</title>
<style>
body{background:#FFF}
p {
color:#000;
margin:0 auto;
text-align:justify;
text-indent:30px;
width:600px;
}
#fadeBottom {
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
bottom:0;
height:50px;
left:0;
position:fixed;
width:100%;
}
</style>
</head>
<body>
<p>Some long text here. Lorem ipsum?</p>
<div id="fadeBottom"></div>
</body>
</html>
For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...
Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.
I have a html snippet below which renders perfectly in all browsers. However in webkit on an iphone and ipad, when I pinch the page (so that its smaller), I see a black border which is the background color of the body shining through only on the right edge. This only happens when I specifiy the width of the .headerpic div. Since this is the only place in the document I specify the width, I was wondering why it stops short of rendering all the way to the right edge (since this is theoretically the widest part of the document?).
I've attached a photo of what it looks like from my ipad.
<!doctype html>
<html>
<head>
<style>
body {background-color:#000;color:#231f20;margin:0;}
#wrapper {background-color:#fff;min-height:1000px;}
#header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
#footer {color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="headerpic">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
In my case using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Instead of:
<meta name="viewport" content="width=device-width">
Did the trick!
It will illustrate your problem a little bit clear: http://jsbin.com/ilenu5/5
What I did:
I Increased the width of the
#headerpic to 1286px
I added a
background color of #headerpic,
which is red
So the your actual problem is: overflow occured
Why?
because you don't set your viewport (width=device-width) and the minimum physical width (in px or cm or em) of body, so your body width by default is 980px, and inherited by #wrapper-- so your 986px #headerpic overflows the #wrapper, and makes your black background appear. Since the overflowed area width is small (986-980=6px), you see a black line.
Making #wrapper position:absolute fixes the problem.
In my case this :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And :
html, body {min-width:980px; overflow-x: hidden;}
Fixes the problem.
Applying
overflow-x:hidden;
to one of my divs did it
Giving credit to #starkadh for the inspiration.
The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).
In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).
Can I somehow fix this (remove this transparency in Safari)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
UPDATED 2021:
Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.
input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
-webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
opacity: 1; /* 2. correct opacity on iOS */
}
it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.
FYI,
opacity: 1!important;
doesn't override it, so I'm not sure it's opacity.
You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.
for #ryan
I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>
Beware that a disabled input and readonly input aren't the same.
A readonly input can have focus, and will send values on submit. Look at w3.org
If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
See that fiddle on Safari
https://jsfiddle.net/u549yk87/3/
This question is very old but I thought that I would post an updated webkit solution.
Just use the following CSS:
input::-webkit-input-placeholder {
color: #880000;
}
Can you use a button instead of an input?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" disabled="disabled">disabled input box</button>
</form>
</body>
</html>