For some reason the internal (:host) styles for the Polymer custom element aren't loading. I'm using the actual fancy_button component from pub (https://pub.dartlang.org/packages/fancy_button).
hello_world.html
<head>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/fancy_button/fancy_button.html">
<link rel="import" href="../lib/components/first-component/first-component.html">
</head>
<body>
<button is="fancy-button">Wooot!</button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
fancy_button.html:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<polymer-element name="fancy-button" extends="button">
<template>
<style>
:host {
background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%);
box-shadow: 10px 10px 5px #888888;
border-radius: 5px;
font-size: 2em;
border: 0;
font-family: 'Tangerine', cursive;
padding: 30px;
}
:host(:hover) {
cursor: pointer;
}
:host(:active) {
font-size: 3em;
}
</style>
<content></content>
</template>
<script type="application/dart" src="fancy_button.dart"></script>
</polymer-element>
I tried your code and it works for me (I get a big pink 'Woot' button, which increases it's size when clicked)
when I comment out this line
<!--<link rel="import" href="../lib/components/first-component/first-component.html">-->
I also had to add
transformers:
- polymer:
entry_points:
- web/hello_world.html
to pubspec.yaml (for dev channel Dart version 1.5.0-edge)
This might be the reason why it work here but not for you
but I can't see anything in CSS that wasn't already supported in Dart 1.4.
I also kept the polymer dependency (0.10.1+1)
I upgraded to the Dartium from the Dev Channel (http://storage.googleapis.com/dart-archive/channels/dev/release/latest/dartium/dartium-macos-ia32-release.zip) and it worked. So styles in Polymer web components don't seem to work in earlier versions of Dartium – either get the Dev Channel version as Günter had suggested or pub build and see it working in regular Chrome instead.
Related
Scenario :
I'm using material icons, and I face a problem, I usually use filled ones and everything is ok, right now I want to use a outlined one, they have the same name, "screen_share"
Tried Case :
My try was include in index.html:
<link
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"/>
<link type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined"
rel="stylesheet">
and in myComponent.html
<button mat-button>
<mat-icon>
screen_share_outline
</mat-icon>
</button>
but it still shows the filled one.
How can I do it?
this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work
Use
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined"
rel="stylesheet">
Instead of
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons&style=outlined"
rel="stylesheet">
Looks like the outlined fonts have not been finalized yet per issue #773
https://github.com/google/material-design-icons/issues/773
I see you are reviewing this issue
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Until the outlined versions are completely included you will need to use the workaround provided in that stackoverflow question... I verified it in stackblitz and it does work.
Add following import to index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the following to style.css
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
Use the following in your component html.
<i class="material-icons-new outline-screen_share"></i>
You can use, for while, this repository. Works pretty equal to Material Icon normal
cguilhermf/material-icons-outline
I have 2 jqgrid tables here in fiddle, what is the best way to apply multiple themes only to the jqgrid tables.
I had tried adding css selector scope to the tables but it didnt work correctly on the table http://jqueryui.com/download/
Theme1 for table1
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
My theme2 for table2
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
First of all you should download custom jQuery UI themes from the jQuery UI download page. For example, you want to use Le-Frog and Redmond themes on one HTML page. The you can use HTML code like
<div class="redmond">
<table id="grid1"></table>
</div>
<div class="le-frog">
<table id="grid2"></table>
</div>
It means that div.redmond and div.le-frog could be selectors, which could be used to specify the scope of applying of the corresponding jQuery UI Theme CSS. Thus you can choose the following on the download page:
You included both CSS on your web page, like
<link rel="stylesheet" href="jquery-ui/le-frog/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui/redmond/jquery-ui.css">
and use the same code as usual. The results will be like on the demo:
or like on the another demo, which use Blitzer and Le-Frog themes:
I included in the demos jquery-ui.css instead of jquery-ui.min.css only to simplify everybody to examine the files. There contains CSS rules with the corresponding rules. For example
div.redmond .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
and
div.le-frog .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
instead of the standard rule
.ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
<!DOCTYPE html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Test title</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
</head>
<body>
<p>Example 1<br>
<a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p>
</body>
</html>
The above, is a button (kind of) that downloads an image. It works fine on my laptop, but when I navigate to the url on my iPhone it doesn't download. Just takes me to the actual image.
Anyone know why? Or how I can fix this?
Thanks!
iPhone doesn't have a download functionality. You will need to tap-and-hold, and select "Save".
Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error:
Uncaught Exception: The "smoke" library has not been configured.
Make sure you import and configure one of the implementations
(package:smoke/mirrors.dart or package:smoke/static.dart).
Sometimes the message was:
No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an #CustomTag annotation for each of the following tags: 'app-element'
What's wrong here? Here is my code:
UPDATE: now code beyond is improved and work correctly after pub build. I change folder/file structure and update polymer to the latest version.
pubspec.yaml
name: app
dependencies:
browser: any
#do not forget update to latest version by running pub update
polymer: any
transformers:
- polymer:
entry_points:
- web/main.html
web/templates/ui-elements.html
<polymer-element name="app-globals"></polymer-element>
<polymer-element name="app-element">
<template>
<link rel="stylesheet" href="/main.css"/>
<content></content>
</template>
<script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>
web/templates/ui-elements.dart
#CustomTag('app-globals')
class AppGlobals extends PolymerElement{
AppGlobals.created() : super.created();
}
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
}
web/main.html (dummy entry file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
web/main.dart
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
#whenPolymerReady
void onReady() {
}
web/main.html (entry point) after pub build. Real mess after compiling. So many js files some of them takes size even more than 300kb.
<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body><div hidden=""><style shim-shadowdom="">
/*******************************
Flex Layout
*******************************/
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
......tons of other styles...........
</style>
<script src="packages/polymer/src/js/polymer/polymer.min.js"></script>
<script>
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script>
<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.js"></script>
-->
<polymer-element name="app-globals"></polymer-element>
<!-- APP ELEMENT -->
<polymer-element name="app-element" class="bck-medusa w-100 h-100">
<template>
<link rel="stylesheet" href="../main.css">
<content></content>
</template>
</polymer-element>
</div>
<script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>
You don't need initPolymer when you use #whenPolymerReady. The entire main() method is redundant in your example.
Did you register your entry page properly in the Polymer transformer configuration in pubspec.yaml?
Smoke needs a transformer but if you have the Polymer transformer configured properly the Smoke transformer is included.
I have an html page where I am experimenting with resizable and other ui features for divs created dynamically. The page shows correctly when in a local directory and accessed by IE File > Open. When I tranfer the file to the web server and access by http://localhost/file.html. The resizable grip icons aren't shown. Also, there are css styles that aren't applied.
The div is defined
var index = getCookie("divindex");
if (index == "" || index == null) index = 1;
var divid = "compage"+index;
$("#page").append('<div id="'+divid+'" class="comdiv ui-widget-content"></div>');
$('#'+divid).append('<p class="comhdr editableText ui-widget-header">Sample'+index+'</p>');
$('#'+divid).css('top',50);
$('#'+divid).css('left',50);
$('#'+divid).css('width',150);
$('#'+divid).css('height',150);
$('#'+divid).resizable();
$('#'+divid).draggable();
$('#'+divid).draggable("option", "handle", '.comhdr');
$( '#'+divid+' p').editableText();
This also happens for a static div.
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px;
height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
The libraries in the file are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script>
<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<style>
.comdiv { position:absolute; padding: 0.5em; border: 1px solid black}
.comhdr { text-align: center; margin: 0; cursor:move; font: 14px bold Georgia; border 1px solid grey; background: grey;}
</style>
<script>
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
});
</script>
Why would the behavior be different between the local file and the web server?
http://jsbin.com/awosup
If I download a copy of jquery/jquery-ui to my web server this fixes the problem. From http://jqueryui.com/download I downloaded stable version 1.8.15 UI lightness theme.
I also had the probelm that the resizable grip isn't showing up along with some other styles not applied. In my case, I found out that I had a css defined which overrode some jquery-ui styles. You can see such things e.g. in Firebug. In my case, I had defined the background for div tags which weighed heavier than the ".ui-icon-gripsmall-diagonal-se" and ".ui-icon" class style definitions.
I did not need to install a local copy of jquery on my web server. CDN version works fine now.