I am building an app with Polymer. I am trying to layout my app using iron-flex-layout. In theory, it makes sense to me. However, practically, I can't seem to make it work with nested elements. Currently, I have the following:
index.html
<html>
<head>
<title>My App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/components/polymer/polymer.html">
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<!-- End of Polymer -->
<link rel="import" href="app.html">
<link rel="import" href="page-home.html">
<link rel="import" href="page-login.html">
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="vertical layout">
<div><h2>Hello</h2></div>
<app-shell flex></app-shell>
</div>
</body>
</html>
The app.html referenced above looks like this:
app.html
<dom-module id="app-shell">
<template>
<style>
:host {
background-color:lightsalmon;
}
</style>
<!-- Determine which view to load -->
<h3>Enjoy!</h3>
<neon-animated-pages flex id="pages" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<page-home></page-home>
<page-login></page-login>
</neon-animated-pages>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'app-shell',
properties: {
selectedPageIndex: {
type: Number,
value: 0
}
}
});
</script>
And, just to provide an example of one of the pages, I have:
page-home.html
<dom-module id="page-home">
<template>
<style>
:host {
background-color:lightyellow;
}
</style>
<div class="vertical layout center-justified">
<h4>Welcome to My App!</h4|>
<h5>I hope you like it!</h5>
</div>
</template>
<script>
Polymer({
is: "page-home"
});
</script>
</dom-module>
The above code isn't behaving how I would expect. The colors don't align with the element hierarchy. In addition, the main content isn't centered vertically or horizontally at all. In an effort to learn how Polymer Elements work, I'm trying to create a layout that looks like this:
+-----------------------------------------------+
| Hello * |
+-----------------------------------------------+
| Enjoy! ** |
+-----------------------------------------------+
| |
| |
| |
| Welcome to my App! |
| I hope you like it! |
| |
| |
| |
+-----------------------------------------------+
I was expecting the part with one star (*) to be light coral. Then, the part with two stars (**) to be light salmon. Finally, the main part of the app to be light yellow. However, the whole thing is light coral. I do not understand what I'm doing wrong. Does iron-flex-layout just not work? Or is there something I'm totally missing here?
Update:
Below is kind of an update showing the addition of the mixin. Even with this mixin added, I still get an error in the chrome console that says: /deep/ combinator is deprecated.
<html>
<head>
<style is="custom-style">
.horizontal-layout {
#apply(--layout-horizontal);
}
</style>
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="horizontal-layout">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
You need to apply the mixins, as described in the fresh new blog entry from Polymer: https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
Related
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.
I'm playing with Polymer 1.0 by creating a simple custom-element (ui-button).
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<dom-module id="ui-button">
<link rel="import" type="css" href="ui-button.css">
<template>
<button class="ui button">
<template is="dom-if" if="{{icon}}"><i class="icon">1</i></template>
<template is="dom-if" if="{{label}}">{{label}}</template>
</button>
</template>
</dom-module>
<script src="ui-button.js"></script>
Everything works fine in Chrome, but in Firefox the button has no styling.
My guess is that the problem is the external stylesheet, because when i put the CSS inline (style-tag)...it works.
Is this a bug in Polymer 1.0?
I really want to use the external stylesheet...
This is working for me in both Chrome and Firefox. This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheet.css">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/app/general/your-element.html">
</head>
<body>
<your-element></your-element>
</body>
</html>
Inside the element, I'm using the css class / id references just like you would on any regular html tag. So, inside of your-element looks something like this:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="your-element">
<template>
<span class="some_class_style">Hey, I'm stylish!</span>
</template>
<script>
Polymer({
is: 'your-element',
...
});
</script>
</dom-module>
And, it's styled by whatever you defined for some_class_style. Keep in mind, I've only made elements that are one level deep (ie. no children elements), but it seems to be working fine.
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.
Lets assume I have two routes which require two different css as follows.
/home
needs
<head>
<link rel="stylesheet" href="/home.css">
</head>
And
/dashboard
needs
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
I can't put both css in same head file as they are conflicting. I can't do something as below.
<head>
<link rel="stylesheet" href="/home.css">
<link rel="stylesheet" href="/dashboard.css">
</head>
Is there any way to put different css for different route's in head?
Note: I need css in head to avoid glitch.
You can use different layouts for the two routes.
<template name="css1">
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
<template name="css2">
<head>
<link rel="stylesheet" href="/home.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and use it in the layout option for the route like:
this.route('path to css1', {
path: '/',
layoutTemplate: 'css1',
template: "css1 template"
});
Or alternatively:
You could do:
<template name="layout">
<head>
{> yield region="css"}}
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
this.route('path to css1', {
path: '/',
layoutTemplate: 'layout',
template: "css1 template"
yieldTemplates: {
'temple having css1': {to: 'css'}
}
});
Meteor compiles all your CSS in a way similar to Rails' asset pipeline.
Your question is coming from a non-single page app mindset.
You can put different stylesheets for different pages, in a multiple page site. But how will this work for an app that is only one page?
Instead, you should scope your style rules.
IE, instead of .container { color: blue }, do something like .container .home-container { color: blue }.
What is the main difference between these two keywords in blade, I found that they do same thing, but... The syntax is different, but whats the main difference?
I am using #yield, and #include, but didn't figure out, which is better to use?
I want to extend my CSS styles, I want to load css styles when needed, for example i want to separate styles and options to navbar and separate css styles to my footer defined in navbar.css, footer.css, i want to include in my main.blade.php, but footer isn't allways visible?
How to solve this? Do I think wrong, and its better to put all css to one file?
What about performance?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Authentication system</title>
{{--custom css--}}
#yield('css')
{{HTML::style('css/bootstrap.min.css')}}
<!-- Custom styles for this template -->
{{HTML::style('css/navbar.css')}}
</head>
<body>
#if(Session::has('global'))
<p>{{Session::get('global')}}</p>
#endif
#include('layout.navigation')
#yield('content')
#yield('layout.footer')
and footer
#extends('layout.main')
#section('css')
#parent
{{HTML::style('css/footer.css')}}
#endsection
#section('footer')
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<
</div>
</div>
</footer>
#endsection
My code doesn't work.
Instead of
#yield('layout.footer')
write
#include('layout.footer')
This should solve your problem.