Is there a method with CSS in which to set the CSS for paper-input such that the label is hidden?
I am wanting to remove the empty space where the label would appear.
Developer tools shows the following property for the area...
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="cell">Key</label>
<vaadin-grid-filter class="cell" id="keyFilter" path="key" value="[[_filterKey]]">
<paper-input style="" slot="filter" placeholder="Search" value="{{_filterKey::input}}" focus-target></paper-input>
</vaadin-grid-filter>
</div>
</template>
<template class="cell">[[item.key]]</template>
</vaadin-grid-column>
You don't need css to do that. Just add no-label-float inside paper-input element.
For example:
<paper-input no-label-float placeholder="Search"></paper-input>
Related
I am building an website and trying to use template tag. And the template is below:
<template class="company-template">
<div>
<img>
<div></div>
<button></button>
<button></button>
</div>
</template>
I want to add class for the elements in the template tag. However, as I know in BEM methology, the names of classes should be dependent to upper element. Should I write the codes just like below and modify or add classes depending on the upper element in JS?
<template class="company-template">
<div class="company-template__company">
<img class="company-template__company__logo">
<div class="company-template__company__description"></div>
<button class="company-template__company__report">Report this company</button>
<button class="company-template__company__chat">Chat with this company</button>
</div>
</template>
Or should I write codes depending on where the template will be used like below?
<template class="company-template">
<div class="search-result__company">
<img class="search-result__company__logo">
<div class="search-result__company__description"></div>
<button class="search-result__company__report">Report this company</button>
<button class="search-result__company__chat">Chat with this company</button>
</div>
</template>
In addition, if the template should be used in many other elements, how should classes be?
Let's say I have a component with this html code:
<template lang="html">
<div id="parent">
<div id="child">
some content
</div>
</div>
</template>
I want to render only the child element when a condition is met, to obtain this result:
<template lang="html">
<div id="child">
some content
</div>
</template>
I first thought I could use v-if, but if I use v-if to conditionally render the parent element, its children will not be rendered when the condition is not met.
I have an issue, when i try to load content into my element, it is always has height = 0, i need element to be sized by content size, is there any suggestions?
There is my template
<template>
<paper-dialog id="dialog" modal>
<h2>{{_computeTitle()}}</h2>
<paper-dialog-scrollable id="main">
<content id="form" select=".content"></content>
</paper-dialog-scrollable>
<div class="buttons">
<content select=".buttons"></content>
</div>
</paper-dialog>
</template>
why are you using a scrollable dialog inside of a dialog? You should use a dialog and give the children the position: relative property.
So I have a custom element called my-element and within that element I have a repeating template that displays a bunch of custom elements called my-card. So I was using inline-block to divide the cards in two columns and that worked but since the cards were of different heights there was some ugly white space in between. As per a suggestion from user here on stackoverflow I used column-count to make it work. Visually, it worked but the my-cards on the right column are not interactive.
If I hover under the first column, I can click the my-cards that are supposed to be in the second column.
Despite it not showing in the image above, the my-cards will be of different heights so I need to have a masonry layout. One column in mobile screen width and two columns in tablet+. How can I achieve that?
Here's the code: http://pastebin.com/NFv6ed2T
I don't see any repeats or anything, but why not change your code to use horizonal and vertical layouts? Remove all excess styling except for that.
And the <section> tag probably isn't necessary.
Assuming you include the iron-flex-layout code somewhere...
working code w/simple styling: http://jsbin.com/cetece/1/edit?html,output
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
This is an example if you need to have the buttons wrap into one row if the container is too small for 2 rows: http://jsbin.com/cetece/2/edit?html,output
Add wrap class to the rows and adjust the styles for a fixed button size and non-fixed wrapping container.
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
If you need the buttons to go be able to all align horizontally if needed then simply remove all of the row containers, and the vertical layout container, and place all paper-buttons in one single container, such as the paper-material.
I am currently having my first tries with Polymer.
What I have is a custom polymer element nested in a core-animated-pages element on the main page.
The sources are:
index.html
<core-header-panel>
<core-toolbar>
[...]
</core-toolbar>
<core-animated-pages transitions="slide-from-right">
[...]
<section>
<contact-page></contact-page>
</section>
</core-animated-pages>
</core-header-panel>
contact-page.html
<polymer-element name="contact-page">
<template>
[...]
<div layout horizontal start-justified>
<div class="placeholder">
</div>
<div class="contact-box" layout horizontal center-justified flex three>
<div class="form-container" layout vertical>
<h2>Contact</h2>
<paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
<paper-input id="mail" floatingLabel label="Mail"></paper-input>
<div layout horizontal>
<paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
</div>
<paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
</div>
</div>
</div>
[...]
</template>
[...]
</polymer-element>
The HTML file currently looks like this in Chrome 37.
Now what I'd like to have is that the yellow bar (placeholder) is vertically stretched over the whole viewport, like this.
Unfortunately I can't figure out which polymer layout attributes I have to use to achieve this and in which tags I have to put them. Can anybody help me here?
Edited to incorporate feedback from sjmiles:
Give this a shot:
<body fullbleed layout vertical>
<polymer-element name="x-foo" layout vertical>
<template>
<style>
#header {
background: tomato;
}
#col {
background: yellow;
}
</style>
<div id="header" layout horizontal>
Header
</div>
<div id="main" flex layout horizontal>
<div flex id="col">Col</div>
<div flex layout vertical>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<x-foo flex></x-foo>
</body>
I'm using the fullbleed attribute to set the body to 100vh and telling it to layout its children vertically using flexbox. Then setting x-foo to flex so it fills the screen. Then it's just a matter of getting the right children to flex.
Here's a jsbin to preview.