How to set the toolbar at the bottom of the page

1,673 views
Skip to first unread message

ignacio...@gmail.com

unread,
Jul 18, 2014, 6:25:29 AM7/18/14
to polym...@googlegroups.com
Hi,

I want to have two toolbar , one on the top and one on the bottom. When I set the toolbat both appears on the top.

  <core-toolbar class="headerBar">
...
  </core-toolbar>
  <div class="statusBar">    
    <p>About 2,300,300 results (0.36 seconds)</p>    
  </div>
  <div>
...
  </div>

  <core-toolbar class="headerBar">    
    <paper-icon-button icon="gear"></paper-icon-button>
  </core-toolbar>



Regards
Ignacio

Eric Bidelman

unread,
Jul 18, 2014, 2:06:59 PM7/18/14
to ignacio...@gmail.com, polymer-dev
This is a good question for stack overflow :)

You can style it using css:

<core-toolbar class="bottom" fit>
...
</core-toolbar>

core-toolbar.bottom {
  position: fixed; z-index: 1000; top: initial;
}

Notice the "fit" attribute on core-toolbar. That's using the layout attributes: http://www.polymer-project.org/docs/polymer/layout-attrs.html


Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0c3e834b-cb51-4bc6-891b-e19b34ef002a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Scott Miles

unread,
Jul 18, 2014, 2:12:25 PM7/18/14
to Eric Bidelman, ignacio...@gmail.com, polymer-dev
I would generally do this like so:

  <body fullbleed vertical layout>
    <core-toolbar></core-toolbar> 
    <div flex></div>
    <core-toolbar></core-toolbar>
  </body>

If you want to do it inside of some element other than `body` the same idea will work as long as the containing element itself gets a size from somewhere.





To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCBFrEF2i1QSnDCGz1BBvcrG%3D35dFQNvNqiKMvAFoG%2B8yg%40mail.gmail.com.

Scott Miles

unread,
Jul 18, 2014, 2:13:25 PM7/18/14
to Eric Bidelman, ignacio...@gmail.com, polymer-dev

ignacio...@gmail.com

unread,
Jul 19, 2014, 10:16:28 AM7/19/14
to polym...@googlegroups.com, ignacio...@gmail.com
It does not work for me.

I have a core-toolbar and then a div flex , when a set the bottom toolbar it appears in the middle of the screen , not in the bottom.

Rob Dodson

unread,
Jul 19, 2014, 10:50:12 AM7/19/14
to ignacio...@gmail.com, polymer-dev
Did you give your body element fullbleed layout and vertical attributes?


Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5f784049-9139-40a5-9799-7f38badae18d%40googlegroups.com.

Martin Amm

unread,
Jul 19, 2014, 1:55:31 PM7/19/14
to polym...@googlegroups.com, ebi...@gmail.com, ignacio...@gmail.com
I've tested http://jsbin.com/hemix/2 on iPhone & iPad - and surprisingly the result seems to be broken: the words "Top" and "Buttom" are not showing inside the bar but way below. Changing the orientation also doesn't adjust the position of the footer.

Should it work on ios ?

Rob Dodson

unread,
Jul 21, 2014, 8:11:58 PM7/21/14
to Martin Amm, polymer-dev, Eric Bidelman, Ignacio Manzano
Yup, looks like the example is broken on desktop Safari as well. #sadPanda

We'll get it sorted!


On Sat, Jul 19, 2014 at 10:55 AM, Martin Amm <m...@adenin.de> wrote:
I've tested http://jsbin.com/hemix/2 on iPhone & iPad - and surprisingly the result seems to be broken: the words "Top" and "Buttom" are not showing inside the bar but way below. Changing the orientation also doesn't adjust the position of the footer.

Should it work on ios ?

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1528428e-bda7-478d-86c2-3b998f88c9e7%40googlegroups.com.

Scott Miles

unread,
Jul 21, 2014, 8:30:51 PM7/21/14
to Rob Dodson, Martin Amm, polymer-dev, Eric Bidelman, Ignacio Manzano
Does this one work: http://jsbin.com/hemix/8/edit?


To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwDCGOHcOf7619aYs8ftrjPF7XgFTk%2B-ejPEp2n4CCfEWQ%40mail.gmail.com.

Martin Amm

unread,
Jul 21, 2014, 8:39:57 PM7/21/14
to Scott Miles, polymer-dev
It works a little better. On iphone it looks ok, on ipad the footer is not showing completely (some pixels at the bottom of the bottom toolbar are missing)

An orientation change doesn't reposition the footer on both devices.

When it works, it would be great to get footer toolbars also in core - scaffold.

kman...@gmail.com

unread,
Dec 2, 2014, 6:38:38 AM12/2/14
to polym...@googlegroups.com, ignacio...@gmail.com
You can use this approach ;)


I would love if someone created a specific element for this, which is close to the behaviour of core-header-panel.
Reply all
Reply to author
Forward
0 new messages