In this demo the el_select directive is used to change the style of the Angular Material Select component. This is the demo html template:
<mat-form-field [el_select]="{ height: '52px', radius: '55px'}" appearance="outline" class="custom-field">
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" panelClass="select-panel">
<mat-option *ngFor="let topping of toppingList" [value]="topping"
>{{topping}}</mat-option
>
</mat-select>
</mat-form-field>
I'm also trying to use the style sheet to apply styles that are not dynamic. If I apply the styles using the class custom-field like this it works:
.custom-field
.mat-mdc-form-field-flex
.mdc-notched-outline
.mdc-notched-outline__notch
label {
top: 50%;
background-color: red;
}
It works. However if I change the selector so that it uses the mat-form-field[el_select] for specificity, instead of custom-field, the selector is no longer applied.
I expected that this CSS should be interchangeable with the custom-field CSS:
mat-form-field[el_select]
.mat-mdc-form-field-flex
.mdc-notched-outline
.mdc-notched-outline__notch
label {
top: 50%;
background-color: red;
}
Any ideas as to why it is not applied?
Angular Inputs aren't represented in the DOM !
You could add a host binding to your directive that can be match by a css selector. !
#HostBinding('attr.my-attr')
Related
I tried to set multiple css to the jquery component using id. But it is not working. If anyone knows, please help me to find the solution:
My jquery component is like
<select-dropdown mode="disabled" id="maindropdown" type="dropdown" value="Option 1,Option 2"></select-dropdown>
CSS:
select-dropdown[mode^="disabled"], select-dropdown [disabled], select-dropdown[mode^="disabled"]{
pointer-event:none;
color:#ccc;
padding:2px;
}
Trying to change this css using jquery like:
$("#maindropdown select-dropdown[mode^="disabled"],select-dropdown [disabled], select-dropdown[mode^="disabled"]").css({
pointer-events:auto,
color:#000,
padding:0px;
});
You have a syntax error in your selector:
Try this:
$("#maindropdown").css({
pointer-events: auto,
color: #000,
padding: 0px;
});
I am trying to set custom styles for checkbox in a RadTreeView. It's simple enough just a different color for checked boxed and another color for unchecked boxes. But I am not sure how to do this.Couldn't find any built in Telerik method/property for this. Tried to do it with css like I usually do by hiding the checkbox and styling a div/span like a checkbox. But the html here is generated from RadTreeView and I am not sure how to apply the same here. The html that gets generated looks like this,
<li class="rtLI">
<div class="rtMid">
<span class="rtSp"></span>
<span class="rtPlus"></span>
<label>
<input type="checkbox" class="rtChk">
<span class="rtIn">Boston</span>
</label>
</div>
Any suggestions on how to style checkboxes in the RadTreeview? Thanks.
If we take this demo: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx
It looks they are using RadFormDecorator to style the checkboxes.
Your html looks like the one from the right hand side and its style is set by this css class:
.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('FormDecorator/CheckBoxSprites.png');
}
So, if you too are using RadFormDecorator then you can override the above css rule by adding your own rule with higher specificity, e.g.
div.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('your_own_image.png');
}
I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
CSS ::after has a nice feature in combination with content and attr(), that lets you insert any attr value as the pseudo-element content.
For general debugging purposes, I'm looking to append a little yellow label to all HTML elements with the content as name of the element.
I can do ids and classes with CSS.
But for elements (p div span etc) javascript is the only option?
Yes you have to use javascript or jQuery that makes it much easier : DEMO
HTML test
<div>
</div>
<p></p>
<form></form>
<span></span>
CSS test
[data-tag]:before {content:attr(data-tag);}
jQuery
$("body").children().each(function() {
var domel= $(this).get(0);
$(this).attr("data-tag",domel.nodeName);
})
it produces this :
<div data-tag="DIV"></div>
jQuery can select all elements of a certain type/tag, I'd recommend using that.
If I understand correctly you want to do the following and you do not need javascript.
http://jsbin.com/wepayija/3/edit
<style>
p::after {
background-color: yellow;
content: 'p'
}
.my-class::after {
background-color: green;
content: 'p'
}
div:after {
background-color: yellow;
content: 'div'
}
</style>
<p>I have no class</p>
<p class="my-class">I have a class</p>
<div></div>
I'm looking to build an autocomplete text widget similar to the "Buy me a pie app" autocomplete. (See http://buymeapie.com/ for an image of the auto complete )
What I'm looking to do is use JQuery autocomplete or typeahead.js to show multiple results in a row of the dropdown.
Any suggestions of how to implement would be appreciated :-)
If you are using typeahead.js you can modify its look and feel as the documentation says: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#look-and-feel
The HTML structure of the drop down menu looks like this:
<span class="tt-dropdown-menu">
{{#datasets}}
<div class="tt-dataset-{{name}}">
{{{header}}}
<span class="tt-suggestions">
{{#suggestions}}
<div class="tt-suggestion">{{{suggestion}}}</div>
{{/suggestions}}
{{^suggestions}}
{{{empty}}}
{{/suggestions}}
</span>
{{{footer}}}
</div>
{{/datasets}}
</span>
First you have to set a width to the div with class .tt-dropdown-menu:
.tt-dropdown-menu {
width: 422px;
}
Then, you have to set the display of the .tt-suggestion div to inline or inline-block:
.tt-suggestion {
display: inline-block;
}
Here is a fiddle: http://jsfiddle.net/dtengeri/7wftL/