When we set disabled attribute for is set as true, in Firefox the button still looks like it is enabled but in IE it is working fine. Is it a limitation with Firefox or JSF.
All JSF does is generating HTML/CSS/JS. Webbrowsers doesn't retrieve/understand JSF code at all. Style and look'n'feel is usually controlled using CSS. All you could do is to view the generated HTML/CSS/JS code for pointers related to the style of a disabled button. You could maybe create a plain vanilla HTML page to do some quick tests to exclude the one and other.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
You can select a disabled submit button using the attribute selector [name=value] in CSS like so:
input[type=submit][disabled] {
background: pink;
}
Test it like follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>input[type=submit][disabled] { background: pink; }</style>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
And apply the learnt things in JSF side.
Related
On the following code I have the Ionic 4 component: Range.
JSFiddle source:
https://jsfiddle.net/681539w0/
Direct result:
https://jsfiddle.net/681539w0/embedded/result/
Inline demo:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>index-ionic.html</title>
<script src="https://unpkg.com/#ionic/core#latest/dist/ionic.js"></script>
</head>
<body>
<ion-range mode="ios" min="0" max="120" pin="true" value="60"></ion-range>
</body>
</html>
In desktop browsers it is fine. Also, on Android browsers it is fine.
But on IPhone (real device) browser (for example: Chrome), when you press the handler, there is one gray square that shows up as you can see on the following image:
I want to prevent that because it doesn't look good.
In the other hand, if you go to this demo:
https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/?ionic:mode=ios&ionic:statusbarPadding=true#/range
and press the handlers you don't get that gray square.
Any idea on how to prevent this?
Thanks!
Set the -webkit-tap-highlight-color CSS property to transparent, like so:
html {
-webkit-tap-highlight-color: transparent;
}
So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.
If i remove the font-size property from style, the effect does not appear.
Is that a browser bug, or am i doing something wrong with the style attribute ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.
I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
<html>
<head>
<style>
#content input[type=text]
{
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" value="Some Text" />
</div>
</body>
</html>
Here's how it renders in FireFox (font is green):
Here's how it renders in Internet Explorer 7 (font is not green):
Update: Adding the DTD solved the issue, however when the input is set to disabled="disabled", IE7 still won't show the specified color.
You'll need to add a strict doctype for IE7 to support attribute selectors with a value.
http://msdn.microsoft.com/nl-nl/library/aa770069
Use a doctype like this, which is about as loose as you can get without breaking this functionality:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Or rather use a more recent and more strict one, if you can.
You are running your site in Quirks mode. use the following doctype or similar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
try this for starters <style type="text/css">
Try using quotes:
input[type="text"]
Alternatively, use a class and apply that class to all of your text inputs.
Maybe not what you wanted, but at least it works ;)
<html>
<head>
<style type="text/css">
.green {
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" class="green" value="Some Text" />
</div>
</body>
</html>
Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?
Here is what I mean: http://www.webdevout.net/test?01I
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
noscript {display:inline !important;}
</style>
</head>
<body>
<p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
</body>
</html>
I would recommend a different approach over using script/noscript tags.
Something like this works best:
<!DOCTYPE html>
<html class="noJS">
<head>
<title>noJS Demo</title>
<style type="text/css">
html.noJS .jsRequired,
html .noJS{
display: none !important;
}
html.noJS span.noJS{
display: inline !important;
}
html.noJS div.noJS{
display: block !important;
}
</style>
<script type="text/javascript">
function onDocumentLoad(){
var html = document.getElementsByTagName("html")[0];
html.className = html.className.replace("noJS", "");
}
</script>
</head>
<body onLoad="onDocumentLoad();">
<p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
</body>
</html>
Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:
$(document).ready(function(){
$("html").removeClass("noJS");
});
Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:
"Insert the following code into the <head> section of your Web page:
<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>
When you need to use <noscript> inline, use <span class="noscript"> instead."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">document.write('<p>This is some text</p>');</script>
<noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
</body>
</html>
Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.
Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.
Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.
As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.