CODEWITHSUNDEEP
csspolymer
JQuery Mobile
JQuery Mobile

Reputation: 6301

Polymer - Paper Toggle Button Layout

I'm learning Polymer. Currently, I have a paper-toggle-button element in my app defined like this:

<paper-toggle-button checked="{{ isEnabled }}">enable?</paper-toggle-button>

When this is rendered, it renders is like this:

[switch] enable?

My question is, is there a way to put the label to the left of the switch? In other words, I want to show the control like this:

enable? [switch]

How can someone do that?

Upvotes: 2

Views: 1066

Answers (3)

SterlingVix
SterlingVix

Reputation: 321

This answer makes some assumptions about the relative size and positioning of your toggle button, but I've tried to defer to the Polymer & flex models.

The idea here is to put your left-adjusted label in a <span> and offset its right side by the width of the toggle button. The toggle button also needs to be padded left; I chose to pad at 33% because I was actually centering labels around the toggle.

Local CSS:

paper-toggle-button.date-toggle {
    padding-left: calc(33% + 1em);
}

/* position the left label outside the containing box */
span.toggle-left-label {
    position: absolute;
    right: 7em; /* Based on a relatively safe render width of the toggle button */
    /*right: 200%;*/ /* Depending on your use case, you might find percentages friendlier than ems */
}

Usage in a paper element:

(here I'm centering the toggle button between 2 labels, but you can just use the toggle-left-label span)

<paper-menu class="app-menu" attr-for-selected="" selected="">
    <iron-icon icon="date-range"></iron-icon>
    <span>Sort by date:</span><br />
    <paper-toggle-button class="date-toggle">
        <span class="toggle-left-label toggle-label">Newest</span>
        <span>Oldest</span>
    </paper-toggle-button>
</paper-menu>

The results maintain good positioning over media/query breakpoints and don't break any responsive views. The results:

Toggle button centered between labels before clicking Toggle button centered between labels after clicking

Upvotes: 0

zerodevx
zerodevx

Reputation: 1591

Err can't you just put your label text before the toggle button?

<span>enable?</span><paper-toggle-button checked="{{isEnabled}}"></paper-toggle-button>

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658255

Thats currently not supported. You can create a feature request to add another insertion point for the label on the left, wrap the element in a custom element and add that feature or fork the paper-toggle-button and customize it.

Upvotes: 0

Related Questions