I am trying to use forcedNarrow=true with paper-drawer-panel. But my page is not responding. Here is my code. Apparently none of the other API are also working. Is there any solution to this problem? I have tried restructuring my web page. But the feature it seems cannot be accessed.
<paper-drawer-panel forcedNarrow='true'>
<paper-header-panel main navigation flex>
<paper-toolbar id='mytoolbar'>
<div id='company_name'>KURIER </div>
</paper-toolbar>
<paper-toolbar id='secondary'>
<paper-icon-button icon="menu" paper-drawer-toggle on-tap="menuAction" ></paper-icon-button>
<paper-button raised>Login</paper-button>"
<paper-button raised>Sign Up</paper-button>
</paper-toolbar>
<div id='signup'>
<form method="get" action="{% url 'transport:index' %}">
<label for="i-want">I Want</label>
<input type="text" name="item-url" id="i-want">
<input type="submit" value="I want">
</form>
<form is="iron-form" id="form" method="post" action="{% url 'transport:signup' %}">
{% csrf_token %}
Sign Up
<paper-input label="Username" name="username-signup" id="username-signup"></paper-input>
<paper-input label="Password" type="password" name="password-signup" id="password-signup"></paper-input>
<paper-input label="Verify Password" type="password" name="password-verify" id="password-verify"></paper-input>
<paper-input label="Email" type="email" name="email-signup" id="email-signup"></paper-input>
<paper-input label="First Name" name="first_name-signup" id="firstname-signup"></paper-input>
<paper-input label="Last Name" name="last_name-signup" id="lastname-signup"></paper-input>
<paper-input label="Address 1" name="address_st_1" id="address1"></paper-input>
<paper-input label="Address 2/District" name="address_st_2" id="address2"></paper-input>
<paper-input label="Phone Number" name="phone_number" id="phone_number"></paper-input>
<paper-input label="City" name="city" id="city"></paper-input>
<paper-input label="State" name="state" id="state"></paper-input>
<paper-input label="Zip Code" name="zip_code" id="zip_code"></paper-input>
<paper-input label="Country" name="country" id="country"></paper-input>
<paper-button raised onclick="submitForm()">Sign Up</paper-button>
</form>
</div>
</paper-header-panel>
<div drawer>
<paper-button>Login</paper-button>
</div>
</paper-drawer-panel>
It's forceNarrow, not forcedNarrow. See docs.
Camelcase attributes are written as hyphen separated attributes when composing an element, <paper-drawer-panel force-narrow>
Apparently the answer is <paper-drawer-panel force-Narrow>
Related
I would like to use the selector last-of-type to target only the last input in every form in my application.
That's the html:
.form-input:last-of-type {
margin-bottom: 10px;
}
<form role="form"
method="POST"
action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-input">
<label>Username</label>
<input id="email"
placeholder="Enter your email"
type="email"
name="email"
value="{{ old('email') }}"
required autofocus>
</div>
<div class="form-input"> <!-- That's the element I want to target-->
<label>Password</label>
<!-- or this one -->
<input id="password"
placeholder="Enter your password"
type="password"
name="password"
required>
</div>
<div class="buttonWrapper">
<button type="submit">Login</button>
</div>
<div style="padding-bottom: 20px;" class="text--center">
<a class="text--uppercase text--condensed" href="">
Forgot Your Password?
</a>
</div>
</form>
Basically I want the last .form-input class to have more padding-bottom or the input of the last .form-input to have more margin-bottom (the effect is the same).
I was trying to use something like this:
That code target also the first input, adding a margin between every input.
I have also tried :last-child but doesn't work if there are more nodes under the one that I want to target.
There's a way around this?
Instead of <div>s and <label>s use <fieldset>s and <legend>s because:
It makes your <form> semantically perfect.
It looks better
Using CSS as the main means of finding elements in the DOM is very limiting, so having <div>s and <span>s everywhere will lessen your chances at getting specific selectors.
Now your layout is semantic, and using nth-of-type is a no brainer:
Demo
fieldset:last-of-type {
margin-bottom: 50px;
border-color: red
}
<form role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<fieldset class="form-input">
<legend>Username</legend>
<input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
</fieldset>
<fieldset class="form-input">
<legend>Password</legend>
<input id="password" placeholder="Enter your password" type="password" name="password" required>
</fieldset>
<div class="buttonWrapper">
<button type="submit">Login</button>
</div>
<div style="padding-bottom: 20px;" class="text-center">
<a class="text-uppercase text-condensed" href="">
Forgot Your Password?
</a>
</div>
</form>
As per my comment above, last of type only applies to the direct parent, so you can't target the last input element of the form if there is a wrapper div around that input (it will instead look for the last input of that wrapper). You also unfortunately can't pass it a class to target the last ".form-input".
The only way I can see to do this without using something unreliable like nth-child (and short of editing your HTML to add an extra class or something) is with JavaScript. Fortunately it's pretty simple to get the last .form-input and add a ".last" class, if you're not averse to doing it this way:
document.querySelectorAll('form').forEach(function(el) {
el.querySelectorAll('.form-input')[el.querySelectorAll('.form-input').length-1].classList.add('last2');
});
Edit: updated to handle all forms.
Unfortunately you can't use last-of-type on scenarios like this. You could achieve the same result by wrapping all your form-input together like this:
<div class="form-input-container"> <!-- Apply margin here-->
<div class="form-input">...</div>
<div class="form-input">...</div>
....
</div>
<div class="buttonWrapper">
The :last-of-type pseudo-class means "last element of its type (i.e. with this tag name) in the container". In your markup, the element you want to select is not the last div in the container, so it doesn't match the selector.
In CSS Selectors level 3, there is no way to select "the last element with the certain class". There is such a possibility in the CSS Selectors level 4 (in your case, it would be :nth-last-child(1 of .form-input)), but it's supported only in Safari.
To solve your problem, there are the following ways:
Use different tags for .form-input wrappers and other wrappers, so
you could use :last-of-type to select the last of them (as
zer00ne suggests);
Assuming that .form-input wrappers always come before other things in the form, you can add the top margin to the next element after the last .form-input, instead of the bottom margin to the .form-input, with the selector like the following: .form-input + :not(.form-input) { margin-top: 10px; }
When I submit this Polymer form with document.getElementById("form").submit(); firstName and lastName are included in the POST-data, but the title-value from the paper-dropdown-menu not. What is missing ?
<form is="iron-form" id="form" method="post" action="/edit">
<paper-dropdown-menu name="title" label="Title">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item value="{{item.id}}">{{title.name}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="submitForm()">Save</paper-button>
</form>
Edit:
Here my complete working example, thanks a lot to #Brandon for his answer:
<form is="iron-form" id="form" method="post" action="/api/edit">
<paper-dropdown-menu label="Title" selected-item="{{selectedItem}}" selected-item-label="{{selected}}">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item value="[[title.id]]">[[title.name]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input" name="title" type="hidden" value$="[[selectedItem.value]]">
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="document.getElementById('form').submit()">Save</paper-button>
</form>
This may solve your problem. Create a hidden input element and assign the selected item to the hidden element's value. This gives you the added benefit of the iron-input validators for multi-select for future forms.
<form is="iron-form" id="form" method="post" action="/edit">
<paper-dropdown-menu label="Title" selected-item-label="{{selected}}">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item>{{title.name}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input" name="title" type="hidden" value$="[[selected]]">
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="submitForm()">Save</paper-button>
</form>
I tried to make a multi-line paper-input in ajax-form element
#info {
width: 90%;
height: 300px;
background-color: white;
padding: 10px;
margin: 20px auto;
}
paper-input {
width: 100%;
height: 150px;
}
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button
icon="image:camera-alt">
</core-icon-button>
</file-input>
<br/>
<paper-input multiline id="last" floatingLabel label="Commentaire" ></paper-input>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
So I added some attribute like maxRows="5" and rows="3" but no way my paper-input are always a single line area.
Instead of using a paper-input you should consider using paper-input-decorator with paper-autogrow-textarea
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button icon="image:camera-alt"></core-icon-button>
</file-input>
<br/>
<paper-input-decorator id="last" label="Commentaire">
<paper-autogrow-textarea rows="3" maxRows="5">
<textarea></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
Instead of paper-input try to use iron-autogrow-textarea:
<iron-autogrow-textarea id="last" rows="3" maxRows="5" bind-value="{{xyz}}">
</iron-autogrow-textarea>
Documentation: https://elements.polymer-project.org/elements/iron-autogrow-textarea
I'm trying to make dynamic validation on my polymer app
I want to make #login-buttonbutton attribute disabled when inputs are empty and remove this attribute when imputs are filled with id and password.
I tried do make html5 required attribute but this solution doesn't work.
Now I created button-click function to hit my Api and i want to add validate function.
<form id="form_login">
<paper-input aria-required="true" name="name" floatingLabel label="Id*"
value="{{name}}"></paper-input>
<br>
<paper-input-decorator floatingLabel label="password">
<input aria-required="true" id="password" is="core-input" name="password" type="password"
value="{{password}}"/>
</paper-input-decorator>
<br>
<div class="page-holder" horizontal layout center center-justified>
</div>
<div class="page-holder" horizontal layout center center-justified>
<paper-button id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
</div>
</form>
My Script:
Polymer('login-page',{
buttonClick: function () {
this.$.ajaxSubmit.go();
},
responseChanged: function (oldValue) {
console.log(this.response);
document.querySelector('app-router').go('/profile?hash=dfsasdsf');
}
});
</script>
disabled?={{!name || !password}} of paper-button may check for empty values in this case. So here is how I would do it:
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<body fullbleed layout vertical>
<form-elem></form-elem>
</body>
<polymer-element name="form-elem" noscript>
<template>
<paper-input aria-required="true" floatingLabel label="Id*" value="{{name}}"></paper-input>
<br>
<paper-input-decorator floatingLabel label="password">
<input aria-required="true" id="password" is="core-input" type="password" value="{{password}}" />
</paper-input-decorator>
<br>
<div class="page-holder" horizontal layout center center-justified></div>
<div class="page-holder" horizontal layout center center-justified>
<paper-button disabled?="{{!name || !password}}" id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
</div>
</template>
</polymer-element>
Here is a jsfiddle version if needed: jsfiddle
I included pure-css to my html template and made a simple form.
I thought that this form will look the same as on PureCSS site.
Although buttons are styled nicely, the input elements on form are 'raw'. No rounded corners, no highlight. Checked on two browsers.
Including theme from Skin Builder and adding my pure-css-theme class didn't help, nor ripping off 'blue-theme' from pure site.
Can't find anything other in pure-css site source..
Why input elements are not styled?
I must be missing something obvious here..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
</head>
<body>
<div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<form class="pure-form pure-form-aligned" action="{% url 'checkin' %}" method="post">
{% csrf_token %}
<fieldset>
<legend> Your position </legend>
<input type="textfield" name="latitude" id="latitude" placeholder="Latitude" /><br>
<input type="textfield" name="longitude" id="longitude" placeholder="Longitude"/><br>
<input type="textfield" name="accuracy" id="accuracy" placeholder="Accuracy" readonly><br>
</fieldset>
<fieldset>
<button class="pure-button " type="submit">Send </button>
</fieldset>
</form>
based on the example here: http://purecss.io/forms/
you need to set the class of the form as 'pure-form'
<form class="pure-form">
<fieldset>
your inputs
</fieldset>
</form>
alongside 'pure-form' you can add: pure-form-stacked or pure-form-aligned for different results. I recommend you to take a good look at the link above
Edit 1
Try with type='text' instead of 'textfield'
<form class="pure-form pure-form-aligned" action="{% url 'checkin' %}" method="post">
{% csrf_token %}
<fieldset>
<legend> Your position </legend>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" /><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude"/><br>
<input type="text" name="accuracy" id="accuracy" placeholder="Accuracy" readonly><br>
</fieldset>
<fieldset>
<button class="pure-button " type="submit">Send </button>
</fieldset>
</form>