I'm developing an web-app in the Play Framework and at the moment I would like to make the entire app able to adjust sizes of containers and text according to the browser's size. I have managed to make the containers adjust and it works fine, but I'm stuck on adjusting the font-size to fill up the container's size. Even though I tried several variants already, it doesn't seem to work at all: when the text is too big for the container, it simply passes it to a new line in the #indexPerson container, instead of adjusting the font. I also tried setting "white-space: nowrap", but this causes a scrollbar to show up, and the font still doesn't adjust itself. Adding "overflow:hidden" simply hides part of the text, no font-size adjustment whatsoever. Is there something I'm missing out? Thanks a lot in advance! I'm using the textFit plugin: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. My css file looks like this:
div#outer {
width:100%;
height:100%;
}
div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And the index page is:
#(people: List[Client])
<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/index.css")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
<script>
$(document).ready(function() {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
$(window).resize(function()) {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
</script>
</head>
<body>
<div id="outer">
#for(person <- people) {
<a href="#{routes.Application.login_form(person.getId())}">
<div id="indexPerson">
#person.getInfo()
</div>
</a>
}
</div>
</body>
</html>
Solved it! Note to self: always make sure the div ids are unique!
Related
It's not necessary, but i have tried to select <script> tag in css. But it didn't work. Why ?
<style>
script {
padding:80px;
background-color:red;
}
</style>
This should work. Because it works on other elements. But not on script tag .
<script>alert(1)</script>
And this is the tag i want to select.
You forgot to set display property:
script{
display:block;
padding:80px;
background-color:red;
}
<script>console.log(1)</script>
You can use display:block to show elements that normally wouldn't.
Browsers simply apply the following rule to hide unnecessary tags
head, title, link, meta, style, script {
display: none;
}
But you can override it just like any other CSS. It even works on elements that are not even on the body, but the head, such as titles, metas, etc
head, title, link[href][rel], meta, style, script {
display: block;
}
And even use some pseudo-elements magic to show attributes of tags such as the rel for your CSS link tag, or the content for your description
title, link[href][rel], meta, style, script {
display: block;
}
link[href][rel]::after {
content: attr(rel) ': ' attr(href);
text-transform: capitalize;
}
meta[charset]::after {
content: 'Charset: ' attr(charset);
}
meta[name][content]::after {
content: attr(name) ': ' attr(content);
text-transform: capitalize;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is the title</title>
<meta name="description" content="This is the Description">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script>/*This is inside an script tag*/</script>
</body>
</html>
And then you can style them as you would any regular html element.
Does this have any practical purpose? Nope, none at all. Maybe (and stretching it quite a bit) displaying the title on a print stylesheet.
Other than that, it's just a pointless fun fact.
The answers posted here are sufficient, but for fun I decided to mess around with this. I noticed a few things. This code makes a short JavaScript visible, and executes it.
body {
background-color:#2a4128;
color:white;
font-size:1.05em;
}
script {
display:block;
color:#ef9a9a;
background-color:#321117;
font-weight:normal;
padding:10px;
border:1px solid red;
font-family:"Courier New";
font-size:0.94em;
text-align:left;
}
.script-area {
text-align:center;
width:79%;
margin-left:10%;
margin-right:10%;
}
h2 { color:pink; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<h3>Hello world!</h3>
<p>Let's see how this script works!!!</p>
<div class="script-area">
<pre><script type="text/javascript">
document.write("<p>This script came from a visible element!</p>");
document.getElementsByTagName("h3")[0].innerHTML = "I changed this with <b><i>inline JavaScript!</i></b>";
console.log(1);
</script></pre>
</div>
</body>
</html>
Like others have stated, the web browser automatically hides typically invisible elements - not just <script>, but <meta>, <title>, <style>, and so on. This is done with the display:none; CSS directive. Like any CSS rule, this can be overwritten with your own. Just select the script and use display:block;.
The script that is now visible on the page, is executed like it normally is. I've noticed the script is unaware of elements that appear after it, and only aware of the DOM that appears before it. I initially placed the brief script in the <head> tag, but I was unable to make it visible with CSS. This is probably due to some kind of
head { display:none; }
rule in the browser software. But I imagine this can be overruled just like for the <script>.
I've been trying to figure out for the longest while why I couldn't get a table at 100% height although all it's parents were at 100%. Playing around I found it worked once I removed jQuery mobile from the site. After that I created a bare bones version of it and actually got the same results. I have no idea why this happens. Here's my code:
HTML:
<table class="container">
<tr style="height:15%;"><td>Menu Goes here</td></tr>
<tr style="height:85%;"><td>Content Goes here</td></tr>
</table>
CSS:
<link rel="stylesheet" type="text/css" href="boilerplate.css">
<link rel="stylesheet" type="text/css" href="jquery.mobile.custom.structure.min.css">
<style type="text/css">
body, html {
height:100%;
width:100%;
margin:0;
padding:0;
}
.container {
height:100%;
width:100%;
border:solid 2px red;
}
tr {
border:solid 2px blue;
}
</style>
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.mobile.custom.min.js"></script>
I'm using a custom jQuery Mobile build but I get the same results even when I use Google's CND.
Any idea why this happens and how to work around it?
EDIT:
http://ramiroproductions.businesscatalyst.com/test.html - barebones version
http://ramiroproductions.businesscatalyst.com/aboutus.html - actual site
Try using !important to make sure that any other css is not overriding the height property.
Also check by doing an inspect element to see if your css is applied or it is striked out.
Update:
For the height property to work correctly if given in percentage you have to make sure that its parent has been given a height. Jquery mobile is adding its own div wrapper on your html which is not having height 100%. see here for solution.
I was under the impression that $('body').offset().top should return 0, but apparently it keeps returning 8. I removed all unnecessary code from my webpage and it still returns 8.
Here is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
$(document).ready(function () {
console.log($('body').offset().top);
})
</script>
</body>
</html>
That's literally everything in my code. Here's the JSFiddle: http://jsfiddle.net/Lspkx2su/
Default CSS. Insert this:
<style>
html, body { margin: 0 }
</style>
and try again.
By default the styling for body tag uses up space in the webpage.
Try this code you'll understand -
The HTML
<body>
<div class="wrapper">
Hello World
</div>
</body>
and the following CSS
.wrapper{
border: 1px solid red;
}
When you run the above code, you'll see that your "Hello World" is displayed with a small offset. This is default in HTML/CSS.
However, #amadan is absolutely right. You should always use the following to start your webpage CSS. No offset problem will occur.
body{
margin:0;padding:0;
/* considering your outermost div to be the wrapper of your whole page */
}
Here is the source code:
<html>
<head>
<meta content="width=472" name="viewport">
<style type="text/css">
img {max-width:100%;} div { margin-top: 0;margin-bottom: 0;font-family:Arial, sans-serif;}p{margin-top: 0;margin-bottom: 0;word-wrap:break-word;}table{border-collapse: collapse;}td{word-wrap:break-word;font-family:Arial;vertical-align:top;}
</style>
<style media="screen" type="text/css">
.bumpedFont16 { font-size:1.6em; }.bumpedFont20 { font-size:2.0em; }
</style>
</head>
<body>
<div style="width:472;background-color:#FFFFFF; position:relative; overflow:hidden;word-wrap:break-word;min-height:830px; padding-left:20;padding-right:20;padding-top:20;padding-bottom:20;">
<style type="text/css">
.s0 {font-size: 17;font-family: Courier;color: rgb(0,0,255);}
.s1 {font-size: 17;font-family: Courier;color: rgb(163,21,21);}
.s2 {direction:ltr;text-align: left;}
</style>
<p class="s2">
<span class="s0">
<span class="bumpedFont16">Testing.</span>
</span>
<span class="s1">
<span class="bumpedFont16">This is a Testing well.</span>
</span>
</p>
</div>
</body>
</html>
And this is how the HTML code look like:
and this is what I want:
How can I write a generic javascript / css to avoid the text wrap to two lines? Thanks.
You can use white-space property with nowrap value:
Collapses whitespace as for normal, but suppresses line breaks (text
wrapping) within text.
for your paragraph:
p.s2 {
white-space: nowrap;
}
Also, instead of multiple internal <style> CSS, I'd suggest you to use external CSS instead.
Fiddle Demo
There is nothing abnormal with the line break; it is normal wrapping. It is caused by your setting a fixed width for an element and having content there that does not fit in the element without wrapping, with your CSS settings.
So you need to decide whether you remove or increase the width setting, reduce the font size, or maybe force the content remain on the same line (e.g. the way #Felix suggests) even though this means that it overflows the element.
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.