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.
Related
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
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 currently trying to modify the CSS of a generated HTML page. I do not have access to run scripts on this page or change the base HTML.
The form has inputs and I am trying to create floating labels for them, which I typically do something like this:
<input id="email">
<label for="email">E-mail</label>
With CSS something like this:
input:focus + label { top: 100%; }
However the generated HTML is structured like this, with the label before the input and error blocks between:
<label for="email">Email Address</label>
<div aria-hidden="true" class="error itemLevel">
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p>
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text">
How would I target the label with pure CSS?
You can use an attribute selector:
label[for="email"] { ... }
I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:
Controller:
$scope.primaryColor = "#325490";
Form Input:
<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">
</div>
</div>
Live Preview:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">
I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!
Remove {{}} and '' and it should work, like this:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">