I am using iron-media-query to display toolbar menu items using Polymer 1.0 but it's not rendering on the mobile device as expected.
The menu are well rendered if i resize the desktop web browser (Google Chrome) but if I load the page on my phone Note 3 it doesn't respect the rule. Might be there is something I'm doing wrong.
<iron-media-query query="(min-width: 750px)" query-matches="{{ isBigWidth }}"></iron-media-query>
<iron-media-query query="(min-width: 600px)" query-matches="{{ isMediumWidth }}"></iron-media-query>
<template is="dom-if" if="{{ isBigWidth }}">
<a href="/">
<paper-button>
<iron-icon icon="settings"></iron-icon>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
<a href="/">
<paper-button>
<iron-icon icon="settings"></iron-icon>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
<a href="/">
<paper-button>
<iron-icon icon="settings"></iron-icon>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
</template>
<template is="dom-if" if="{{ !isBigWidth }}">
<template is="dom-if" if="{{ isMediumWidth }}">
<a href="/">
<paper-button>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
<a href="/">
<paper-button>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
<a href="/">
<paper-button>
<span class="vertical-align">Settings</span>
</paper-button>
</a>
</template>
</template>
<template is="dom-if" if="{{ !isMediumWidth }}">
<paper-icon-button icon="more-vert" id="icon_button2"></paper-icon-button>
</template>
Media queries using pixels are based on phone viewports, so the note 3 should be treated as a 360px x 640px device http://viewportsizes.com/?filter=note%203
Also, make sure to include in the header:
<meta name="viewport" content="width=device-width" />
Related
We have a very large menu, so we have provided a scrollbar to that menu. But due to that scrollbar sub-menu are stopped to opening up.
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="menus-list">
<template is="dom-repeat" items="{{menuItems}}">
<template is="dom-if" if="{{!item.subMenuItems}}">
<li>
{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown">
{{item.name}}<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<template is="dom-if" if="{{!item.subMenuItems}}">
<li>{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown dropdown-submenu">
{{item.name}}<span class="caret-right pull-right"></span>
<ul class="dropdown-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<li>{{item.name}}</li>
</template>
</ul>
</li>
</template>
</template>
</ul>
</li>
</template>
</template>
</ul>
</div>
and the CSS code is
.scrollable-menu{
height: auto;
max-height: 400px;
overflow-x: hidden;
}
The scrollbar is coming up properly but sub-menu stops to open up. Please suggest
Try This:
.scrollable-menu
{
overflow-x: auto;
max-height: 400px;
}
On Google Chrome the dropdown menu (when clicked) gets displayed in the middle of the screen then gets aligned properly above the icon menu. Here's an image that will describe it better.
I am sure that it's not a CSS problem because it works perfectly normal on FireFox but not on Chrome.
Code:
<paper-toolbar class="navbar-inverse">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Questions</paper-item>
<paper-item>Opinions</paper-item>
<paper-item>Codes</paper-item>
</paper-menu>
</paper-menu-button>
<span class="title">CodeIts</span>
<ul class="navbar-nav list-inline">
<li>
<paper-button class="signup" ink="circle">Sign up</paper-button>
</li>
<li>
<paper-button class="login" ink="circle">Log in</paper-button>
</li>
</ul>
</paper-toolbar>
I am trying to integrate some Polymer components I created with Material Design Lite. However, they just don't render anything, it's as if material design couldn't work with Polymer components.
These are the steps i follow to create a HTML+Material Design side menu:
Plain Material Design Lite side Menu:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Menu</span>
<nav class="mdl-navigation">
Link 1
Link 2
Link 3
Link 4
</nav>
</div>
Now, as a test, I create a nav-menu.html Polymer element with some markup:
<dom-module id="nav-menu">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "nav-menu"
});
</script>
</dom-module>
Then, it's included before the menu and rendered OK:
HTML:
<nav-menu/>
<div class="mdl-layout__drawer">
...
Rendered code:
<nav-menu>
<p class="style-scope nav-menu">I'm a DOM element. This is my local DOM!</p>
</nav-menu>
<div class="mdl-layout__drawer">
Now, I change the nav-menu.html component to include the full menu:
<dom-module id="nav-menu">
<template>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Express</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href=""> Link 1</a>
<a class="mdl-navigation__link" href=""> Link 2</a>
<a class="mdl-navigation__link" href=""> Link 3</a>
<a class="mdl-navigation__link" href=""> Link 4</a>
</nav>
</div>
</template>
<script>
Polymer({
is: "nav-menu"
});
</script>
</dom-module>
and include it in the main page:
<nav-menu/>
This is the rendered HTML code (seen on chrome developer tools inspect):
<nav-menu>
<div class="mdl-layout__drawer style-scope nav-menu">
<span class="mdl-layout-title style-scope nav-menu">Express</span>
<nav class="mdl-navigation style-scope nav-menu">
<a class="mdl-navigation__link style-scope nav-menu" href=""> Link 1</a>
<a class="mdl-navigation__link style-scope nav-menu" href=""> Link 2</a>
<a class="mdl-navigation__link style-scope nav-menu" href=""> Link 3</a>
<a class="mdl-navigation__link style-scope nav-menu" href=""> Link 4</a>
</nav></div>
</nav-menu>
Apparently it's OK, however, the page doesn't show anything, it's just blank.
UPDATE: The problem seems to be that the media query style that shows the menu doesn't apply to the new element:
#media screen and (min-width: 1025px)
.mdl-layout--fixed-drawer>.mdl-layout__drawer {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
Since the polymer element is nested in a <nav-menu> tag, the CSS style isn't applied. Any suggestions?
Solved it removing the nested <div class="mdl-layout__drawer style-scope nav-menu"> from the Polymer component and applying the style directly in the HTML:
nav-menu.html:
<dom-module id="nav-menu">
<template>
<span class="mdl-layout-title">Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href=""> Link 1</a>
<a class="mdl-navigation__link" href=""> Link 2</a>
<a class="mdl-navigation__link" href=""> Link 3</a>
<a class="mdl-navigation__link" href=""> Link 4</a>
</nav>
</template>
<script>
Polymer({
is: "nav-menu"
});
</script>
</dom-module>
HTML:
<nav-menu class="mdl-layout__drawer"/>
I have currently implemented my breadcrumbs like this:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">CURRENT TITLE</span>
</div>
As you can see, I haven't specified a url for the current page, which would be redundant.
But when I try the Google testing tool, I get an error saying that the url is missing for the current page breadcrumb.
Given that, I have three options that I can think of.
I specify a url for the current page:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="CURRENT LEVEL URL" itemprop="url">
<span itemprop="title">CURRENT TITLE</span>
</a>
</div>
I just display the current page title without including it in the structured data markings:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a> >
</div>
<span>CURRENT TITLE</span>
I don't display the current level in the breadcrumbs (I don't want to do that I must say):
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a>
</div>
What do you think it's best I should do?
The solution is to use the <meta> tag.
So, the last item in your breadcrumb should look like this:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">CURRENT TITLE</span>
<meta itemprop="url" content="CURRENT URL" />
</div>
This will validate on the Google testing tool and achieve your desired goal to construct a valid breadcrumb without "displaying" a redundant link.
For reference: Getting started with schema.org using Microdata
3c. Missing/implicit information: use the meta tag with content
Sometimes, a web page has information that would be valuable to mark
up, but the information can't be marked up because of the way it
appears on the page... In these cases, use the meta tag along with the content attribute to
specify the information.
Have to add that for sake of completeness that to have a properly formatted breadcrumb for Google SERP, according to their current specs, your example code should look like this:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="a" itemref="b">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="b" itemprop="child" itemref="c">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="c" itemprop="child">
<span itemprop="title">CURRENT TITLE</span>
<meta itemprop="url" content="CURRENT URL" />
</div>
Bear also in mind that the Google breadcrumb documentation is due for review shortly, since it seems that, at last, Google has adopted the schema.org markup for breadcrumbs from what can be inferred from the "Better presentation of URLs in search results" post in the Official Google Webmaster Central Blog and discussion on it.
I would go with the option of just showing the title, current level not included in the markup as below. IMHO you don't have to include the current page in breadcrumb, as the SERP will anyway point to the current page. It makes sense to provide breadcrumb from one level higher than the current page. hope this helps. BTW, we have done it that in our organization.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="HOME URL" itemprop="url">
<span itemprop="title">HOME TITLE</span>
</a> >
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="1ST LEVEL URL" itemprop="url">
<span itemprop="title">1ST LEVEL TITLE</span>
</a> >
</div>
<span>CURRENT TITLE</span>
I'm trying to add a bootstrap navbar following this guide: http://robertdickert.com/blog/2014/05/09/set-up-navigation-with-iron-router-and-bootstrap/. However the brand keeps appearing on a separate line from the list of links. ie (underscore is just to show the indent):
Brand
__Link1 Link2 Link3
This is the output from meteor list:
accounts-password 1.1.0* Password support for accounts
accounts-ui 1.1.5 Simple templates to add login widgets to an app
autopublish 1.0.3 Publish the entire database to all clients
bootstrap 1.0.1 Front-end framework from Twitter
iron:router 1.0.7 Routing specifically designed for Meteor
meteor-platform 1.2.2 Include a standard set of Meteor packages in your app
Here is the related html. I didn't add any css code, only installed bootstrap via meteor add.
<template name="layout">
<div class="container">
<header>
{{> nav}}
</header>
<body>{{> yield}}</body>
</div>
</template>
<template name='nav'>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
{{> navBrand}}
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
{{> navItems}}
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
</template>
<template name="navBrand">
<a class="navbar-brand" href="{{ pathFor 'home' }}">MyApp</a>
</template>
<template name='navItems'>
<li class="{{ activeIfTemplateIs 'link1' }}">
Link1
</li>
<li class="{{ activeIfTemplateIs 'link2' }}">
Link2
</li>
<li class="{{ activeIfTemplateIs 'link3' }}">
Link3
</li>
</template>
The problem was I didn't have bootstrap 3 installed. Fixed it with:
meteor remove bootstrap
meteor add mizzao:bootstrap-3