Hi I'm new in using Polymer.js and I'm building my HTML custom tags in order to reuse them in my front-end work. The problem is that when I try to open my index.html in Safari and Firefox I see the only HTML without all the CSS. In Chrome everything works perfectly. I can't understand why it happens.
I use Polymer 1.0.0 and Firefox and Safari are in their latest versions.
Any suggestions?
Thank you all in advance.
Here is the code (As you notice I've included the webcomponents-lite.min.js):
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Polymer Project</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="app/components/pd-dashboard/dashboard-articles.html" />
<div class="row">
<dashboard-articles> </dashboard-articles>
</div>
<div class="col-sm-2"></div>
</div>
</html>
dashboard-articles.html:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="import" href="../../components/articles/article-2col/article-2col.html">
<link rel="import" href="../../components/articles/article-1col/article-1col.html">
<link rel="stylesheet" type="css/text" href="../../components/pd-dashboard/dashboard-articles.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Dosis:800,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<dom-module id="dashboard-articles">
<template>
<div class="container-fluid">
<div class="row" style="margin: 5px">
</div>
<div class="row">
<hr>
<div class="row">
<div class="col-sm-5">
<article-1col></article-1col>
</div>
<div class="col-sm-7">
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "dashboard-articles"
});
</script>
Problem solved!
The <link> to the .css file must be inside the tag <template> in each component you create!
Related
I'm creating a page using angular 8 with materialize in which i will need to display some pictures, and if the user click on one of them, i want it to open in fullscreen, materialize has a class where you can do it, but when I use it, the image doesn't open
I expected it to open as it opens in this link
https://materializecss.com/media.html
but it doesn't show any reaction to my click
i tried to do like this:
<img src="assets/img/test.png" class="materialboxed">
that's my html page
<div class="container ">
<h1>Materialize Image Gallery</h1>
<div class="row card">
<div class="col s12 m6 l4">
<img src="assets/img/test.png" class="materialboxed">
</div>
<div class="col s12 m6 l4">
<img src="assets/img/test1.png" class="materialboxed">
</div>
<div class="col s12 m6 l4">
<img src="assets/img/test2.png" class="materialboxed">
</div>
</div>
</div>
and this is my index page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
media="screen,projection">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
As in your snippets, you didn't initialize the MaterialBox widget as described in the documentation.
Inside your index file, add a script with this JQuery:
$(document).ready(function(){
$('.materialboxed').materialbox();
});
Or you can add a vanilla Javascript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});
The final index page file using JQuery should be like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
media="screen,projection">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
//Added Code
$(document).ready(function(){
$('.materialboxed').materialbox();
//End Added Code
</script>
</body>
</html>
I hope this answer goona help someone.
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/
I am trying to use "vulcanize index1.html > index2.html", but am stumbling on an issue in IE. I have condensed it into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
</head>
<body>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
drawer
</div>
<div main>
main
</div>
</paper-drawer-panel>
</body>
In Chrome the result is fine, but in IE, "drawer" and "main" are shown incorrectly
Anyone?
Seems to be a bug which is already logged
https://github.com/Polymer/vulcanize/issues/209
I am using a main template with a {{> yield}} statement to render my Meteor JS pages. This is how it looks like:
<template name="main">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<div class="container">
{{> yield}}
</div>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</template>
And with it, I render my actual pages e.q.:
<template name="home">
HOME
</template>
This all is functional because I use Iron Router like so:
Router.configure({
layoutTemplate: "main",
notFoundTemplate: "404"
});
Router.route("/", function() {
this.render("home");
});
The problem I face is that the page title isn't being rendered. I would expect the page title to be "Title" because I have defined <head> -> <title> to be "Title" (as you can see in my main template).
The weird thing here is that all the CSS does load, which indicates that the <head> section is - at least partially - rendered.
The head is rendered in a special process. Let's call it bundling for the lack of a better word. In that bundling-process the contents of all body and head elements are put into the HTML that will be served first. iron-router appends the contents of your template to the body after meteor is loaded on the client. These elements are only being searched for on the root level. The link tags are loaded, because most browsers (more or less) don't care where they occur.
I'd do something like this:
client/main.html
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
client/templates/main.html
<template name="main">
<div class="container">
{{> yield}}
</div>
</template>
I want to implement the fluid layout. Shown as here http://twitter.github.com/bootstrap/scaffolding.html#global
What i did:
added gem 'twitter-bootstrap-rails + bundle install
layouts/applicationlayout
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
SIDEBAR
</div>
<div class="span10">
<%= yield %>
</div>
</div>
</div>
</body>
nothing took change. What did i forget?
The bootstrap-responsive.css file is only part of bootstrap. The main css file you need is called bootstrap.css
Try adding this line of code in your header and see if anything changes:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
Actually, it does work, look at the jsFiddle:
http://jsfiddle.net/persianturtle/sEywB/