I have a code snippet of a jQuery Dialog which renders differently in Firefox and Chrome. I know it is a CSS issue and I was think the documentation specifies that the ui-dialog-content and ui-widget-content would be responsible but I am clearly misunderstanding something.
The example is:
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style>
body {font-size: 8pt; font-weight: normal;}
span {font-size: 8pt; font-weight: normal;}
.ui-dialog-content {font-weight: normal; }
.ui-widget-content {font-weight: normal;}
</style>
</head>
<body>
Sample text at 8pt...<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
<input type="button" value="show" onclick="$('#divTest').dialog()"/>
<div id="divTest" style="width: 700px; height: 400px; display: none;" title="Test">
Why is this text bold?<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
</div>
</body>
</html>
In Firefox I find the dialog's content bold-faced which is unwanted. In Chrome I find the content normal-faced but the line spacing has been increased to about 2.
I have tried to over ride the UI content classes but to no avail. Can someone make a suggestion?
Thanks.
I found the answer by using Chrome's developer tools and Firefox's Firebug tool. jQuery UI themes override some of the settings. I was able to identify the CSS that was being overridden by studying the effective styling for each element after the jQuery UI dialog box was displayed.
The CSS I used to correct the display of the dialog content text, and input and select fields is:
.ui-widget input, .ui-widget select {font-family: arial; padding: 0px 0px;}
.ui-dialog-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt; }
.ui-widget-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt;}
I hope this saves someone a few minutes.
Related
I wanted to make my website display something if they don't use JavaScript. I know you could use the <noscript> tag but if I have CSS on my page I want it to clear my CSS so you could read the text.
function test()
{
alert("you are using javascript!");
}
body
{
background-color:#200;
}
<input type="button" value="Click Me with JavaScript" onClick="test()">
<noscript>You liar! You don't have JavaScript!</noscript>
The easiest thing to do is create a small css file to have the noscript CSS, like below. Note you can style the text as you want. This is just an example. You can even add your css that you want to run only in no script environment in this sheet
body:before{
content: 'Please turn on Javascript';
color: white;
font-family: sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 100%;
padding: 1em 0;
background: rgba(0,0,0,0.9);
}
Then add the following HTML
<noscript>
<link rel="stylesheet" type="text/css" href="noscript.css">
</noscript>
Assuming I have a folowing code - fiddle - with font-size attribute set for <html> tag. This styling along with header and footer is generated via js script which cannot be removed. This is already existing page for a long time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="bootstrap4.css">
<link rel="stylesheet" href="myCustomCss.css">
<link rel="stylesheet" href="cssLoadedByJs.css">
</head>
<body>
<div>
Header (need to stay as it is now with smaller font)
</div>
<div class="content"> <!-- (need to reset it 100%, so content will be sized as I want...) -->
Content
<h2>
H1 here
</h2>
</div>
<div>
Footer (need to stay as it is now with smaller font)
</div>
</body>
</html>
Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:
html {font-size: 62.5% !important;}
myCustomCss.css - what I was trying to do:
html .content {
/* font-size: 100% !important; */
/* font-size: unset; */
/* font-size: 16px; */
}
How to reset font-size attribute for content div only and preserve header and footer as it is?
I've tried to set font-size: unset; or font-size: 100% for content div but no result. font-size: 16px let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check fiddle for better understanding and tests...
I'm not sure why exactly are you using font size on html tag directly but maybe the following hack can help overcome your problem.
html > body > div.content,
html > body > div.content * {
font-size: 137.5%;
}
I seriously advise not using this approach and styling specific elements instead.
Check this: https://jsfiddle.net/5jdrta16/1/
I took the font-size... important setting off of the <html> and applied it to the <body> element (without important). I also moved all the styling into the CSS.
.content {
font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}
body {
font-size: 62.5%;
}
What about:
.content, .content * {
font-size: initial;
}
I'm trying to get hyphenation working correctly.
<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
width: 113px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
overflow: hidden;
font-family: "Chivo", sans-serif;
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
This results in a text box with is hyphenated as follows:
I can forgive instances where words are hyphenated incorrectly as I understand that some words aren't always in 'htmls' dictionary. But what I find strange is that hyphenated words somethimes leave gaps in paragraphs. In this example this would make much more sense:
BIJZETTA-
FEL ASPEN
MET TIJD-
SCHRIFTEN-
REK
As after hyphenation there would be enough space after 'MET' TO PUT 'TIJD-' BEHIND IT.
How can I fix the code so that hyphenated syllables automatically continue behind previous words when there would be plenty of space for it?
The basic problem is that the browser has a hyphenation algorithm and you can't interfere with it. The browser will lay the text out as it wants. (The same is true in MS Word, InDesign or any other text software, of course. It's just that with proper layout software, you get more control over the text properties.)
The reason that the browser has moved "TIJD-" to the next line is that it's fractionally too wide for the space the browser has left to place text in so it has no choice but to move it.
You have two options for changing how the text flows. The first is to make a tiny adjustment to the element width, the font size or the font kerning. (You can do this across the whole text, or just to offending portions using a span.) This will change the maths behind the text flow and may let you produce a more aesthetic result.
The second is to use hard spaces ( ), thin spaces ( ) or (as a real bodge) spans with padding and no real spaces at all, to try and force the browser to lay the text out as you want.
But, because all browsers are different, you can't guarantee the result, whatever option you choose. If it's essential to get the right look, you'll need to use an image (but don't forget the accessibility if you do)!
Strangely enough I found out that by commenting out 'overflow: hidden' and adding 'display: table' to the product-name class I got what I wanted. Removing 'overflow: hidden' made the syllables move nicely behind the previous words. When I went to another browser window those syllables moved down again for some reason, but that was fixed by adding 'display: table'. The resulting code below. Leading to above good result. Not a clue why this works but css sometimes works mysteriously :-)
<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
/* added display: table*/
display: table;
width: 113px;
height: 300px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
font-family: "Chivo", sans-serif;
/*overflow: hidden;*/
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
Today I learned how to use Material Design Lite. But I have a problem: I can't use custom font. How can I fix something like this?
If I delete <link rel="stylesheet" href="css/material.min%202.css" /> from my file, it will change my font into Raleway. But if I still use <link rel="stylesheet" href="css/material.min%202.css" />, it will replace my font with default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/material.min%202.css" />
<style>
#font-face{
font-family: 'Raleway';
src: url('WebFont.eot');
src: url('./fonts/raleway-regular-webfont.woff') format('woff'),
url('./fonts/Raleway-Regular.ttf') format('truetype');
}
.container{
font-family: 'Raleway';
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="centered">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<h2>Harap segera lakukan verifikasi email anda untuk bisa melanjutkan ketahap berikutnya.</h2>
</div>
</div>
<script src="js/material.min.js"></script>
</body>
</html>
There are two possible reasons:
The file fonts you are referencing do not resolve (the links are wrong or the files are corrupted/invalid/truncated) - this should create some entries in your console log (most browsers issue warnings whenever they are unable to resolve resources)
You have a stronger selector applying a different rule to the element you are trying to style (right-click > "Inspect element" > find font-family value and what is setting it - most browsers allow you this type of inspection; if your does not, use Chrome or Firefox).
Very important: Please note that, even if you specify a font-family for a parent, if the child has a specified font-family it will ignore any font-family coming from parents, regardless of selector strength in parent rule.
For example:
body {
font-family: monospace !important;
}
p {
font-family: sans-serif;
}
<p>I am <p>.</p>
<div>I am not <p>.</div>
will give <p> elements inside your <body> a value of sans-serif and not monospace, as you'd expect.
Most likely, you need to find the rule setting font-family for your element(s) and override it at the same (parent) level or below (in a child). Trying to override it from above where it is currently set will not work.
A good trick in overriding font-family from parent level is to use
parentSelector * {
font-family: value !important;
}
... as this will match any rule set at child level, and the !important will get applied:
body * {
font-family: monospace !important;
}
p#some-id {
font-family: sans-serif;
}
<p id="some-id">I am <p>.</p>
<div>I am not <p>.</div>
In this example body * and p#some-id are referring to same child and the stronger selector (!important) gets applied.
I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.
I'm not quite certain what a friendly way to do this would be.
Edit:
Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)
--------------------------- # say they can checkoff or select tags they like.
| o[tag2] x[foo] o[moo] |
| x[tag1] o[bar] |
---------------------------
If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.
See the working demo here: http://jsbin.com/ezifi
You can modify how the suggestions are presented by monkey-patching the render functions on the autocomplete widget.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style type="text/css" media="screen">
h1 { font-size: 20pt; color:Navy; }
h2 { font-size: 18pt; font-weight:bold; color: #DDD; }
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
body { margin:0; padding:0; height:100%;}
.ui-widget { font-size: 0.8em; line-height:0.6em; }
.ui-widget .ui-widget { font-size: 0.7em; }
div.inputDiv {
float: left;
width: 42%;
height: 400px;
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
</head>
<body>
<div class='inputDiv'>
<h1>jQueryUI Autocomplete demo</h1>
<p>Type a few characters of a word</p>
<form action="jquery" id="form1">
<input type="text" id="input1"/>
</form>
</div>
<div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
</div>
</body>
</html>
The Google method is one option: an input textbox with suggestions listed drop-box style underneath.
del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.
With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.
Some other considerations that might factor into your decision:
How many tags will you suggest at any given time? 2? 5? 10? 50?
Should the user be forced to use your suggested tags only? Is entering their own a valid option?