Foo.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
The appearance of the text is good. This image should be centered, but it isn't:
<img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>
TestStyle.css:
body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
margin-left: auto;
margin-right: auto;
display: block;
}
Result:
Try:
.centerblock {
position:fixed;
top:10px;
left: 10px;
}
Maybe that can help, Although i don't know what can happen if you turn the phone.
I would make that main content area to fit to the edge of display and define all align properties for each element.
It's never very smart to do:
body {margin-left:30px;}
body {margin-right:30px;}
There is also option:
.main-container {
margin: 0 auto;
}
That also centers all the content but i think, also would not solve your problem.
Related
I'm developing an app using Worklight 6.2 where the layout has a fixed field of research in the header, when this field receives focus, the virtual keyboard of the operating system is presented.
Running this app on iOS (iPhone 4 and iPhone 5 the layout is larger than the screen) when the layout is not the beginning (was rolled down), the div and input that were fixed at the top (position: fixed) lose this configuration and are similar to absolute layout. Another problem is that the header (div and input), automatically cut some pixels, going to the center of the screen and was hidden divs that appear scrolling the page.
Below the prints of some situations and the source code with the problem.
Without showing the virtual keyboard (correct layout)
When show a virtual keyboard with layout rolled down
When does scroll the page with the virtual keyboard showing (Lose the configuration layout: fixed and apparently assumes the configuration layout: absolute)
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
{
margin: 0;
padding: 0;
font-family: 'MuseoSans-100';
}
/* Worklight container div */
body {
height: 100%;
width: 100%;
}
.div-header {
height: 200px;
width: 100%;
background-color: #0094D9;
position: fixed;
}
.input-header {
margin-top: 100px;
height: 40px;
width: 100%;
}
.div-body {
height: 500px;
width: 100%;
}
.div-body-1{
background-color: #ffff9f;
}
.div-body-2{
background-color: #1b8127;
}
.div-body-3{
background-color: #fb7d00;
}
</style>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="wrapper">
<div class="div-header">
<label class="span-header">Hello Worklight</label>
<input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header">
</div>
<div id="div1" class="div-body div-body-1">
Div 1
</div>
<div id="div2" class="div-body div-body-2">
Div 2
</div>
<div id="div3" class="div-body div-body-3">
Div 3
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The issue of screen distortion due to virtual keyboard can be resolved by adding $('body,html').animate({scrollTop:0},'fast'); either on the screen-size change event or in case if the keyboard hides on touching any element then on onclick event.
I had the same issue, adding this plugin to the project fixed it!
https://github.com/apache/cordova-plugins/tree/master/keyboard
After adding it, set Keyboard.automaticScrollToTopOnHiding = true;
and it will do the trick
Consider the following page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Load it into safari on the iPhone. The page renders at 100% height. Now turn the iPhone to landscape and drag the page upwards. The (bottom) button bar appears and now we're scrolling the page up and down by the amount that the button bar offsets the content. No longer is the page height 100%, and content that should be visible is underneath the button bar, and a vertical scrollbar is evident.
Is it possible to eliminate this annoyance and get true 100% height?
Use this script to add a class to html if it is an iPhone:
if((navigator.userAgent.match(/iPhone/i))) {
$('html').addClass('iphone');
}
Then try making its position as fixed, but only for when the orientation is in landscape, like so:
#media (orientation:landscape) {
html.iphone > body {
position: fixed;
bottom: 0;
width:100%;
height: 480px !important; /* pretty sure its 480px? */
}
}
Finally solved this by a meta directive in the head section that makes the appearance of the bottom button bar considerably less aggressive. Notice the last part (minimal-ui)
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
I'm trying to style a custom element tag, and can't seem to do it from within the element's <style> tag, or at least I don't know what selector to use. I've tried the custom element's tag name and template, but neither work.
<polymer-element name="my-test" constructor="MyTest">
<template>
<style>
my-test {
border: solid 1px #888; /* doesn't work */
}
.title {
color: blue; /* works */
}
</style>
<div class="title">{{ title }}</div>
</template>
I'm using polymer.dart, so there may be some lag in its implementation, but I'd like to know how it should work in polymer.js.
I think what you want is the #hostcss selector.
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host
As mentioned in another answer, to style the host of the shadow DOM, use #host selector. In the case of a custom element, the host of the custom element is itself.
Here is an example of how to style the host element, or the custom element itself, from within a custom element's <style> tag.
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<polymer-element name="my-element">
<template>
<style>
#host {
my-element {
display: block;
border: 1px solid black;
}
}
p {
color: red;
}
#message {
color: pink;
}
.important {
color: green;
}
</style>
<p>Inside element, should be red</p>
<div id="message">
The message should be pink
</div>
<div class="important">
Important is green
</div>
<div>
<content></content>
</div>
</template>
<script type="application/dart" src="index.dart"></script>
</polymer-element>
<p>outside of element, should be black</p>
<div id="message">
The outside message should be black
</div>
<div class="important">
Outside important is black
</div>
<my-element>Hello from content</my-element>
<!-- If the script is just an empty main, it's OK to include inline. -->
<!-- Otherwise, put the app into a separate .dart file. -->
<script type="application/dart">main() {}</script>
</body>
</html>
Notice the #host block in the style:
#host {
my-element {
display: block;
border: 1px solid black;
}
}
Because this particular custom element does not extend any element, it does not default to a block.
Here is what it looks like when styled:
I'm trying to implement the latest sIFR. But I can't get even the simplest of tests to work. My test page is at http://www.kellymitchelljewelry.com/testsifr.asp. There should be an sIFR-generated line that says "2nd line" between the first and third lines. I'm using the examples provided on the sIFR page exactly.
My html looks like this:
<html>
<head>
<title>Kelly Mitchell Fine Jewelry</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
First Line<br><br>
<h1>Second Line</h1>
<br>Third Line<br><br>
</body>
</html>
My sifr-config.js looks like this:
var cgoth = { src: 'cgoth.swf' };
sIFR.activate(cgoth);
sIFR.replace(cgoth, {
selector: 'h1'
});
My sifr.css file looks like this:
#media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
#media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
#media screen {
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
line-height: 1em;
}
*/
I've tried recreating my swf file just in case I did something wrong, and closely followed the instructions to make sure I didn't leave anything out.
Can someone help me figure what I'm doing wrong?
Tom
I don't think your Flash movie is correct, opening it directly should show "Rendered with sIFR 3" text. Make sure it was exported correctly.
I have never been able to get a .swf file exported from Flash to work with sIFR. I've always ended up having to use the online sIFR generator: http://www.sifrgenerator.com/wizard.html
I don't know if my version of Flash (CS3) is just not compatible with sIFR or what... I do always save as version 8 like it says to, and make sure every setting is as it should be, but no luck. However, using that generator always seems to solve it. So if your Flash is jinxed to, you might want to give it a try.
When reloading the page, sometimes <li>Dagbladet</li> is rendered with a linebreak before "t", so it looks like:
Dagblade
t
<li>DN</li> is always rendered as:
D
N
I´d like to list each list element to the right for the previous one.
It´s positioned as it should when I don´t activate sIFR3.
All tips on how to use sIFR3 with to achieve this is highly appreciated!
The list should look like this:
Aftenposten Dagbladet Verdens Gang DN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>type-test</title>
<link rel="stylesheet" href="sifr/sifr.css" type="text/css">
<script src="sifr/sifr.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var cochin = { src: '/sifr3-r436/demo/cochin.swf'}
sIFR.activate(cochin);
sIFR.replace(cochin, {
selector: 'h1, h2, h3, h4, li',
css: '.sIFR-root { }'
});
</script>
<style type="text/css" media="screen">
ul li {
list-style: none ;
display: inline ;
}
</style>
</head>
<body>
<p>
<ul>
<li>Aftenposten</li>
<li>Dagbladet</li>
<li>Verdens Gang</li>
<li>DN</li>
<ul>
</p>
</body>
</html>
sIFR uses the width of the original element to fit the Flash text into. In your case, the Flash text is wider than the original element, doesn't fit and instead breaks into a new line.
The solution is to add some letter-spacing (through a .sIFR-active selector) to make the HTML text wider just for sIFR. Then when the replacement happens there'll be enough space to fit the Flash text.
use like this
sIFR.replace(test, {
selector: 'h1',
css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
wmode: 'transparent',
forceSingleLine: true;
});
forceSingleLine: true; will solve your problem.
I really think you need to be posting this on the SIFR Support Forums. This isn't a programming issue.