Making Polymer.dart elements appear, and using style with Polymer.dart - css

I am on my first Dart project. I already managed to make working tabs.
But I am having trouble making my polymer element appear in the web browser.
The output should be a light grey ribbon, like in Office 2007+.
The only thing I can see is a 0x0px light grey vertical line.
If I use classic HTML and CSS (no templating) it works.
I don't understand what I am doing wrong.
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CVWebkit</title>
<link rel="stylesheet" type="text/css" href="CVWebkit.css" media="screen" />
<script src="scripts/packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="scripts/cvwebkit.dart"></script>
<script src="scripts/packages/browser/dart.js"></script>
</head>
<body>
<polymer-element name="zone-ruban">
<template>
<link rel="stylesheet" type="text/css" href="./CVWebkit.css"/>
<div class="ruban">
<template repeat="{{zone in zones}}">
<div id="{{zone}}">
<template repeat="{{fonction in fonctions}}">
<img src="{{fonction}}"/>
<span class="titre_ruban">{{fonction}}</span>
</template>
</div>
</template>
</div>
</template>
</polymer-element>
</body>
And here is my Dart code (cvwebkit.dart):
import 'dart:html';
import 'dart:async';
import 'packages/polymer/polymer.dart';
import 'packages/observe/observe.dart';
void main() {
querySelectorAll(".onglet")..onClick.listen(ouvrirOnglet);
}
#CustomTag('zone-ruban')
class ZoneRuban extends PolymerElement with Observable {
final List zones = toObservable(['navigation', 'composants', 'propcompo', 'utilisateur']);
final List fonctions = toObservable(['Navigation', 'Composants', 'Propriétés du composant', 'Données utilisateur']);
ZoneRuban.created: super.created();
}
The CSS :
.ruban {
background-color: transparent;
top:0px;
height: 100%;
border-right: 1px solid grey;
position: inherit;
}
#navigation{
width:10%;
}
#composants{
width:25%;
left:10%;
}
#propcompo{
width:40%;
left:35%;
}
#utilisateur{
width:25%;
left:75%;
}
.titre_ruban {
left:0%;
width:100%;
bottom:0px;
position:inherit;
text-align:center;
color:gray;
text-shadow : 0px -1px 1px #000 ;
height:15%
}
.contenu_ruban {
top:0px;
height:85%;
left:0px;
width:100%;
vertical-align:central;
position:inherit;
}
.user_menu {
display:none;
}
Any idea why the ribbon isn't appearing?

I guess you need something like
:host {
display: block;
}
in your elements CSS.

Related

What's the reason for css styling not working for div container, but changeable and visible in inspect mode?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>erjan_vue</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="erjan_vue_1">
<h1>events tutorial</h1>
<div id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
<script src = "main.js"></script>
</body>
</html>
But it's only visible when I change it in inspect chrome mode. I can change its bg color and see it:
Actual styles.css not working:
#canvas{
padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;
}
taken from the tutorial here
The tutorial I m following was written a year ago(april 2017) and has no actual app.vue file which should have 3 things:
<template>
<script>
<styles>
Now this "styles" is where css stuff should go to.
I followed the advice of Sazzad Hosan from the comments above and just added a very ugly inline style:
<div style="padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;" id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
And it worked, like Sazzad said - "inline styles" take precedence over others.

Padding in CSS not consistent in Web vs. Mobile

I have the following html code for a page:
<!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>Buy, Sell Anywhere!</title>
<?php
$bgimglist = array(
"1419761599136.jpg",
"123.jpg",
"6Edng.jpg",
"second-hand-smoke-2-390x285.jpg",
"AllSmoke.jpg",
"best-air-purifier-for-smoke.jpg",
"HTB1pZmkG.jpg",
"images.jpg",
"index.jpg",
"SmokerBearded.jpg",
"sygareta.jpg"
);
$bgimg = $bgimglist[array_rand($bgimglist)];
?>
<style type="text/css">
body {
background-image: url(images/<?php echo $bgimg;?>);
background-repeat:no-repeat;
background-size:cover;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body>
<script language="JavaScript">
... removed...
</script>
<div id="top">
<div class="ad">
<?php include 'Ad728x90.inc';?>
</div>
<div id="TC">
<p>By using this site, you agree to the terms and conditions. You also agree that your government, local or national permits you to engage in activities relating to... <removed>...</p>
<p>You must be at least 18 years to use this site, regardless of your local laws. We do not encourage children to be associated in any way with this site.</p>
</div>
<div id="main">
And I have the following CSS:
.large {
font-size:30px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#top {
font-size:300%;
font-weight:bold;
text-align:center;
padding:19px 0 6px 0;
}
.ad {
margin:auto;
padding:10px;
text-align:center;
}
.links a{
color:#FFF;
text-decoration:none!important;
}
#TC {
margin:auto;
width:90%;
height: 50px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
}
#main {
margin:auto;
width:90%;
height: 500px;
text-align:center;
font-size:12px;
background-color:#FFFFFF;
padding: 10px;
}
Most of the CSS may not be relevant, but I have included it for completeness. The problem is that the DIV with the id "TC" appears to have bottom padding on the web using Firefox, Chrome and IE; but not on my mobile using Chrome. In fact, some text is cutoff, so it appears to have a negative padding!
Slightly troubling (maybe this is a different issue) is that the padding on top looks bigger than the padding at the bottom on all browsers, but using Inspect Element in Firefox, the Box Model shows a 10px border for bottom and top.
Any inputs appreciated as always.
It's doing that on smaller screens because the content is overflowing the #TC div,
you can make that div bigger, or use overflow: hidden, or overfow-y: scroll in your css.
For demonstration purposes I have included overflow-y: scroll
#TC {
margin:auto;
width:90%;
height: 60px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
overflow-y:scroll;
}
CODEPEN DEMO

How to center my entire webpage including the background

i want the part with the border to be centered on all screen resoultions. is this possible with the margin-top and margin-bottom properties?
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:1000px;
height:1000px;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try:
#container{
width:960px;
margin:0 auto;
/*more CSS*/
}
You can change 0 to whatever, like 50px. Your image width is larger than 960px though.
Maybe you want something like this:
var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
return doc.getElementById(e);
}
function alignTop(id){
var e = E(id), w, h;
if(IE){
h = parseInt(e.currentStyle.height);
}
else{
h = parseInt(getComputedStyle(e).getPropertyValue('height'));
}
w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}
You should put your script tag in the head so the body is defined in some older Browsers. I would use external JavaScript, so it's cached, like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Your Title Here</title>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='some words to help SEO here' />
<style type='text/css'>
#import 'common.css'; #import 'thisPage.css';
</style>
<script type='text/javascript' scr='someName.js'></script>
</head>
<body>
<div>
<div id='container'>Example Only</div>
</div>
</body>
</html>
To see a working model, visit http://jsfiddle.net/MeMQz/2/ .
i know that centers it but i want the top to be equal to the bottom by centering the whole page.not just left and right – HeyItsProdigy
Based on your comment above I guess you are trying to make the height of the content is 100% equal based on the height of the browser. You can use this trick:
html, body{
height: 100%;
}
#container{
display: block;
height: 100%;
}
Have a look at the result here http://jsfiddle.net/qiqiabaziz/GB4W2/1/

Error with the less color variable values

I am just learning less.I have my html file like this
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title>.::LESS::.</title>
<link rel="stylesheet" type=text/css"" href="style.less" />
<script type="text/javascript" src="less.js"></script>
</head>
<body>
<div class="box1">This is box1</div>
<div class="box2">This is box2</div>
<div class="box3">This is box3</div>
</body>
</html>
and my style.less file is like this
#blue : #00c;
#light-blue: #blue + #333;
#deep-blue: #blue - #333;
.box1 {
background-color: #blue;
}
.box2 {
background-color: #light-blue;
}
.box3 {
background-color: #deep-blue;
}
But after all this when I am going to check the html page from the browser it is not showing anything.If I am changing the values of background-color to any color values then the background color can be seen over there.Can some one tell me where is the wrong part?Any help and suggestions will be welcome.Thanks in advance.
You are missing an # for light blue. Is this how it is supposed to look like?
Your code compiles correctly to
.box1 {
background-color: #00c;
}
.box2 {
background-color: #3333ff;
}
.box3 {
background-color: #000099;
}
However, the following line you wrote:
<link rel="stylesheet" type=text/css"" href="style.less" />
should be:
<link rel="stylesheet/less" type="text/css" href="style.less" />
Try this and check again if it works.

CSS image hover problem in Chrome and IE

I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533

Resources