I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?
<div class="row">
<ul class="collection with-header" v-if="listaRoles.length > 0">
<li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
<li v-for="r in listaRoles" :key="r.id" class="collection-item">
<div class="left-align">
<span> {{ r.descricao }} </span>
<input type="checkbox" />
</div>
</li>
</ul>
</div>
You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.
<label>
<input type="checkbox" />
<span>Red</span>
</label>
Any deviation from this will break the component.
EDIT:
Checkboxes inside li works perfectly fine, here a codepen to demonstrate:
https://codepen.io/doughballs/pen/KKpNrPy
The error is coming from somewhere else.
https://materializecss.com/checkboxes.html
Related
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
I'm using a paid template, and I'm trying to apply it to the project (it's working, but not good to the eye)
This is the code
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Outside vue</label>
<div id="vm_settings">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside VM</label>
<template v-if="1">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside if</label>
</template>
<template v-for="setting in settings">
<div>
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside for</label>
</div>
</template>
<button v-on:click="saveSettings">Save</button>
</div>
This is how it is outputed to the browser checkbox not having the styles it should
Any way to fix it?
Customized checkboxes are not merely styled with CSS, they are proxied: the real checkbox widget is hidden and other elements are inserted and styled in their place.
As such, there must be some call that examines the HTML and does the widget replacement. You need that to happen to each element that gets inserted. You do that by writing a wrapper component. Typically, in its mounted hook, you would apply the initialization of the widget to this.$el (or something inside it).
I am working on an angular2 project and in that I am using a third party component, Angular2-tree-component. In that component JS file, they are using color coding of highlighting a particular node with X color code.
I want to modify it with Y color code but unable to do so.
In orginal JS file below is the line of code:
.tree-node-focused > .node-wrapper > .node-content-wrapper { background: #e7f4f9 }
I am trying to override this color coding to some other code for below html code:
<p-panel header="Schema">
<div class="row">
<div class="col-sm-12">
<Tree #tree [nodes]="LHSNodes" [focused]="true" [options]="optionsForLHS" (onInitialized)="getLHSTree(tree.treeModel)">
<template #treeNodeTemplate let-node >
<span>
<input type="checkbox" name="node.data.selected" value="{{node.data.selected}}" (click)= "onCheckBoxClick($event, node, 'LHS')" [(ngModel)]="node.data.selected">
<label *ngIf="!node.data.isEdit">{{node.data.documentUri}}</label>
<input *ngIf="node.data.isEdit" id="node.data.documentUri" value="{{node.data.documentUri}}" [(ngModel)]="node.data.documentUri" type="text" size="10" pInputText (keyup.enter)="updateName(node)" />
</span>
</template>
</Tree>
</div>
</div>
</p-panel>
I am not understanding what should I write in my css file because same line of code is not working with updated value.
Let me know if it needs more clarification.
I've got a *ngFor where I fetch a heroes list.
Now, If I change a value of hero, my heroes should be changed too, how do you do it, the best way...
<li *ngFor="#hero of heroes">
<input type="text" [value]="hero.name"/>
</li>
I only know the way to make a (change)="UpdateListByItem(item)" , to call a methode, but isn't there a way to make a two way databind for all items?
You can do two way databinding using ngModel directive
<li *ngFor="#hero of heroes">
<input type="text" [(ngModel)]="hero.name"/>
</li>
Whenever you change the input text the corresponding hero name will get changed.
More information can be found here https://angular.io/docs/ts/latest/guide/forms.html
You could use ngModel to do this automatically
<li *ngFor="#hero of heroes">
<input type="text" [(ngModel)]="hero.name"/>
</li>
Look at this Answer.
ngModel allows to change individual name and update the list immediately.
<ul>
<li *ngFor="#hero of heros">
<input type="type" [value]="hero.name" [(ngModel)]="hero.name" />
</li>
</ul>
I have ASP.Net code similar to the following (this is inside a FIELDSET):
<ol>
<li>
<label>Some label</label>
<one or more form controls, ASP.Net controls, labels, etc.>
</li>
<li>
<label>Another label</label>
<... more of the same...>
</li>
...
</ol>
I'm trying to keep my markup as clean as I possibly can, but I've decided that for various reasons, I need to wrap a DIV around everything in the list item after the first label, like this:
<ol>
<li>
<label>Some label</label>
<div class="GroupThese">
<one or more form controls, ASP.Net controls, labels, etc.>
</div>
</li>
<li>
<label>Another label</label>
<div class="GroupThese">
<... more of the same...>
</div>
</li>
...
</ol>
I would rather do this with "unobtrusive Javascript" via jQuery instead of littering my page with extra markup so I can keep the form semantically "clean".
I know how to write a jQuery selector to get to the first label in each list item $("li+label") or use :first-child. I also know how to insert things after the selection.
What I can't figure out (at least this late at night) is how to find everything after the first label in the list item (or basically everything in the list item except for the first label would be another way to put it) and wrap a DIV around that in the document ready function.
UPDATE:
Owen's code worked once I removed the single quotes from around: $('this') and set the proper decendent selector: $("li label:first-child") in order to only select the first label that occurs after a list item.
Here is what I did:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
edit: corrected code (see old code in revision history and comments for more info)
ok this should work:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
from:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produces:
<li>
<label>Some label</label>
<div class="li-non-label-child-wrapper">
<div>stuff</div>
<div>other stuff</div>
</div>
</li>
<li>
<label>Another label</label>
<div class="li-non-label-child-wrapper">
<div>stuff3</div>
</div>
</li>
One approach would be to just wrap everything inside the <li> and then move the label out, e.g.
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());