While scrolling, the paper-toolbar is condensed. How can I disabled this behaviour ?
Not condensed
Condensed
Have you tried using paper-header-panel? paper-header-panel is specifically made to make it easy to use the paper-toolbar to have a 'toolbar' as a fixed header that stays put while the rest of the content scrolls.
paper-header-panel is designed to work with paper-toolbar for this purpose, and it should just be a matter of wrapping your paper-toolbar and your scrolling content with a paper-header-panel:
<paper-header-panel>
<paper-toolbar> <!-- Internally, paper-header-panel will project this into a header div -->
<div>Toolbar stuff</div>
</paper-toolbar>
<div>Main content stuff</div> <!-- Internally, paper-header-panel will project this into a scrolling div -->
</paper-header-panel>
There was two <paper-scroll-header-panel> :
One for the menu bar
One for the content
...and I was trying to modify the former instead of the latter.
The html tag for the content panel was written as following :
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
The only thing to do was removing condenses :
<paper-scroll-header-panel main id="headerPanelMain" keep-condensed-header>
EDIT :
Even better :
<paper-scroll-header-panel main id="headerPanelMain" fixed>
Related
On my website I have used v-cloak with css property [v-cloak] {display: none} to hide the content before the vue script is loaded. I want to hide the content only inside the div, however, all the content below the closing tag of the div is also hidden. Is there a way to fix that?
How my code looks:
<!-- Content I want to be displayed -->
<div class="..." v-cloak>
<!-- Content that I want to be hidden before the vue script is loaded -->
</div>
// Content I want to be displayed
<!-- Content I want to be displayed -->
I am building a Polymer application based around the concepts of the prpl pattern espoused at Google IO this year. Specifically related to this question this means that there is an index.html file which loads the web-components polyfil and has a single element in its body <my-app>
<my-app> in turn uses the polymer elements <app-header-layout> set to provide a waterfall effect on a top toolbar, does some session management (to ensure the user logs in) and then delegates everything else to a <my-pages> element. In simplistic terms <my-app> looks like this:-
<app-header-layout>
<app-header fixed effects="waterfall">
<app-toolbar>
<h4 >Part of my toolbar</h4>
</app-toolbar>
</app-header>
<my-pages></my-pages>
</app-header-layout>
<my-pages> uses the <iron-pages> element to allow the user to select among different pages, each page of which is its own element. In simplistic form like this:-
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" >
<my-menu name="home" menu-page="{{page}}"></my-menu>
<my-list name="list" list-page="{{page}}"></my-list>
<my-long-page name="long" long-page="{{page}}"></my-long-page>
</iron-pages>
The reason my example has three pages is because there are three cases I want to cover. <my-menu> is a flexible layout consisting of lots of buttons and a number of separate <paper-card> elements used to group the menu into sections. In the normal desktop scenario this comfortably sits within the screen size, but when displayed on a smart phone will require scrolling to reach all the buttons. <my-long-page> is an example of a page with lots of content. It WILL require scrolling to reach the content at the bottom of the page.
<my-list> is the difficult one - It will consists of a header and then an <iron-list> element. An example layout looks like this:-
<div class="title">
<span>List Page</span>
<paper-button id="return" raised>Return To Menu</paper-button>
</div>
<div class="header">This is the heading for my List</div>
<iron-list items="[[data]]" as="row">
<template>
<div class="row" tabindex$="[[tabIndex]]" index="[[index]]">
<div class="field">[[row.id]]</div>
<div class="field">[[row.name]]</div>
<div class="field">[[row.outcome]]</div>
</div>
</template>
</iron-list>
Mostly, my list pages have a controlled set of columns, but there is one class of page where the server sends the columns to be displayed back in the ajax request to get the data. In that instance I have to use a <template is="dom-repeat"> element to list the fields (in both the above list header and in the lists row contents).
This app has grown organically over the last few months, and my styling is a mess. Despite my best efforts the majority of pages have a scrollbar on the right even when the content doesn't justify it and the <my-list> page is difficult to get completely right. So I am taking a step back, breaking the styling down and trying to approach it from scratch. I want to use Polymers flex-box mixins (eg #apply(--layout-vertical); etc ) in each of the custom elements styles to achieve the following:-
A toolbar that remains at the top of the page always, with a waterfall effect if content has to scroll underneath it.
A flexible layout that will work on desktop, tablets and phones
No horizontal scroll bar the majority of the time - when the pages collapse to their minimum width after flexing and they are still outside the bounds of the device they are being displayed on then a horizontal scroll bar should appear
When page content is less than the vertical space on the screen, to have no vertical scroll bar, when more than the vertical space to then have a scroll bar.
The <my-list> page should precisely fit the screen in most cases (so no scroll bar for the page in normal circumstances) with the <iron-list> element height set to fully fill the remaining vertical space on the screen below the header items. It will of course throw up its own scroll bar if the number of items in its list exceed the available space. This space for the <iron list> should have a minimum height such that when the screen height is too small, then and only then, can a second, page oriented vertical scroll bar appear.
I am struggling to achieve this - particularly the element with the <iron-list> I can easily set its height to a fixed size and it will work, but whenever I try and apply flex to it seems grow to the full size of its content and then the overall page ends up by being scrollable and I loose the list heading. The closest I've got so far is to use calc(100vh -200px) to set the height, but this requires me to guess (or know) the height of the heading above the list.
What I am looking for is guidance as to what to put inside a <style> inside the <template> each of the custom elements to achieve the aims listed above in the most elegant manner
This question is quite broad an actually more a question about CSS layout and flexbox than about Polymer itself, but I will try to answer some of the points:
Toolbar: app-layout and app-header-layout should give you a fixed toolbar on the top. Use the fullbleed attribute to make it fullsize (`')
Regarding responsive layout: The easiest in my mind is to start to design for mobile first (define your styles so that it works good for mobile view). Use ChromeDevTools to switch to a mobile view. One the mobile view works, use media queries and change some of the CSS classes. Most of the time you might for example switch from --layout-horizontal to --layout-vertical. You can also look into app-grid for content heavy or card layouts.
Horizontal scrollbar: I would try to avoid it as much as possible to have a horizontal scrollbar. Rather re-arrange the content or use different visualization paradigms. In general you should work with min-width and min-height and combine it with flex:1 settings to flexible adapt content to available space.
Vertical scrollbars are more common. Using flexbox you can make the content stretch to the entire avaialble space and combining it with min-height you can make sure that the vertical scrollbar is displayed.
The iron-list requires an explicit size for itself or the container. One way is to size it ahead of time. Alternatively you can use --layout-fit or --layout-vertical on the container and --layout-flex on the iron-list to make it take the available space.
I would recommend to read some material on flexbox. It sometimes can be tricky (see this question for example: How to make flexbox children 100% height of their parent?)
I've a sidebar like this:
Button 1
Button 2
This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
This is the content area!
Current Behaviour - when i remote the md-is-locked-open attribute and start to show the sidebar if the user clicks a button, then the side bar is fullscreen and not inside the content area.
So it differs in the following points form the locked version:
Its over the toolbar
It grays ot the main content
its over the content area
Required Behaviour - what do i have to change to have it inside the content area? So it looks exactly the sameway like it is when its locked .
It should be unter the toolbar
Should not overlap main content (just move it to the right=
Should not gray out other content
Codepen Here
Just change the:
<div layout="row" flex>
above the sidenav for:
<md-content layout="row" flex>
and the corresponding closing tag. And that's it!
The md-toolbar must be sibling to an md-content to get the behaviour you are looking for.
EDIT
For your further requirements please check this Codepen I've made. It does exactly what you want (override the sidenav behaviour to hide the overlay and push the contents to the right): http://codepen.io/anon/pen/pjXYMa
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top)
(Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the <body>, then your bar will be pushed down the page. What if the JS selects all the <div>s on the page, and fades them out?