label for select #243
Comments
|
Just tested the code in Edge and it does not work correctly - for some reason custom attribute's |
|
Stupid question, maybe.. import * as au from "aurelia";Is that new? 😄 How is it used? Like this? <select md-select md-select-label="My select label" value.two-way="selectedValue">
<option value="" disabled selected>select an item</option>
<option value="item1">item 1</option>
<option value="item2">item 2</option>
<option value="item3">item 3</option>
<option value="item4">item 4</option>
</select> |
|
Yep. The usage is exactly like this. On 31 Aug 2016 9:23 PM, "Daniel Bendel" [email protected] wrote:
|
|
Ah, thanks for clarifying this. I think I can repeat this with your custom attribute as both attributes share the same element. |
|
I think it would be better to implement it on the original md-select. This On 31 Aug 2016 9:35 PM, "Daniel Bendel" [email protected] wrote:
|
|
Yes, I think you're right, thanks. |
|
I'm a bit concerned about the css import: This will only work in JSPM this way and I'm not sure how to compensate for this. Any ideas? |
|
Arent you doing this for md-input? You can include style tag in HTML I guess. On 1 Sep 2016 3:36 AM, "Daniel Bendel" [email protected] wrote:
|
|
md-input is a custom element which means it has a template. I guess until the above is solved we can go with md-colors. I just hope everybody uses that. 😄 |
|
I've set the color to accent. What do you think? It usually implies "active" so I'm not sure..
|
|
Will it always be active or only when you expand the list? On 2 Sep 2016 4:18 AM, "Daniel Bendel" [email protected] wrote:
|
|
Also, validation won't work on selects as is because it only recognises |
|
Try this one for validation 😄 export class MaterializeFormValidationRenderer {
className = 'md-input-validation';
classNameFirst = 'md-input-validation-first';
render(instruction) {
for (let { error, elements } of instruction.unrender) {
for (let element of elements) {
this.remove(element, error);
}
}
for (let { error, elements } of instruction.render) {
for (let element of elements) {
this.add(element, error);
}
}
}
add(element, error) {
switch (element.tagName) {
case 'MD-INPUT': {
let input = element.querySelector('input');
let label = element.querySelector('label');
if (input) {
input.classList.remove('valid');
input.classList.add('invalid');
error.target = input;
}
if (label) {
label.removeAttribute('data-error');
}
let message = document.createElement('div');
message.id = `md-input-validation-${error.id}`;
message.textContent = error.message;
message.className = this.className;
if (!element.querySelector('.' + this.className)) {
message.className += ' ' + this.classNameFirst;
}
message.style.opacity = 0;
element.appendChild(message, element.nextSibling);
window.getComputedStyle(message).opacity;
message.style.opacity = 1;
break;
}
case 'SELECT': {
const selectWrapper = element.closest('.select-wrapper');
if (!selectWrapper) {
return;
}
let input = selectWrapper.querySelector('input');
if (input) {
input.classList.remove('valid');
input.classList.add('invalid');
error.target = input;
}
let message = document.createElement('div');
message.id = `md-input-validation-${error.id}`;
message.textContent = error.message;
message.className = this.className;
if (!selectWrapper.querySelector('.' + this.className)) {
message.className += ' ' + this.classNameFirst;
}
// Make the element fully transparent.
message.style.opacity = 0;
// message.style.color = color;
selectWrapper.appendChild(message, selectWrapper.nextSibling);
// Make sure the initial state is applied.
window.getComputedStyle(message).opacity;
// Fade it in.
message.style.opacity = 1;
break;
}
default: break;
}
}
remove(element, error) {
switch (element.tagName) {
case 'MD-INPUT': {
let message = element.querySelector(`#md-input-validation-${error.id}`);
if (message) {
element.removeChild(message);
}
let input = element.querySelector('input');
if (input && element.querySelectorAll('.' + this.className).length === 0) {
input.classList.remove('invalid');
input.classList.add('valid');
}
break;
}
case 'SELECT': {
const selectWrapper = element.closest('.select-wrapper');
if (!selectWrapper) {
return;
}
let message = selectWrapper.querySelector(`#md-input-validation-${error.id}`);
if (message) {
selectWrapper.removeChild(message);
}
let input = selectWrapper.querySelector('input');
if (input && selectWrapper.querySelectorAll('.' + this.className).length === 0) {
input.classList.remove('invalid');
input.classList.add('valid');
}
break;
}
default: break;
}
}
}
hmmf.. forgot to add md-colors where the style already was implemented |
|
If you look at the commits for this issue, they are adding a label to the control similar to a regular input field - wrapping it with |
|
Select label is in. 😃 |
Would be nice to have labels for dropdowns (selects). I've created a custom attribute for my project which works quite well, but I'm not qualified enough to submit a proper PR.
Here is the code:
Obviously, CSS colors will have to be set in the
md-colorselement as wellThe text was updated successfully, but these errors were encountered: