I am trying to style the .md-input-element on md-input which is added by default from angular-material.css which seems I cannot get to work. I cam trying to add the letter-spacing style but it only works as the current. style on the console. Is there any way to override this particular style for md-input-element in my own css file?
My html code is as below :
<!-- Input Name* -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
<div class="name-padding">
<md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name"
[(ngModel)]="outlet.name">
<md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint>
</md-input>
</div>
</div>
</div>
css :
.md-input-element {
letter-spacing: 0 !important;
}
If you set the style in the component that contains the mentioned html code, then it will not work because of the standard ViewEncapsulation. The default ist Emulated and will change your CSS-selector to something like the following during runtime:
.md-input-element[_ngcontent-xsa-40] {
{
letter-spacing: 1px;
}
This selector will not match with class="md-input-element" of the md-input because of the attached attribute.
Now you have three options
Use /deep/: You can rewrite your selector using deep. E.g. :host /deep/ .md-input-element to stop Angular2 adding the cryptic attribute to your selector.
Change ViewEncapsulation: You can change your ViewEncapsulation to None to stop Angular2 adding the cryptic attribute to your selector.
Global style: Add the style to a global style.css to get around the ViewEncapsulation
Look here for more information about styling your components https://angular.io/docs/ts/latest/guide/component-styles.html
try with below selector
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
letter-spacing:0!important;
border-color: orange;
}
Related
I have these elements on the HTML:
<div id="td-status" class="icongb-cancelled"></div>
<div class="ticket-header-text">
<span class="bet-text">TEXT1</span>
<span>TEXT2</span>
</div>
and I want to apply a certain style using LESS to TEXT1 ('bet-text' class) whether its uncle has a cercaion class (in this case icongb-cancelled). I'd like to apply it also to TEXT2 (no class). Would it be possible?
I'm using this code, but it doesn't work:
.icongb_cancelled ~ .ticket-header-text {
& .bet-text {
color: #959595;
}
}
NOTE: I don't want to use JQuery to add or remove any class.
I want to make it just using LESS wihtout any modifying on the HTML.
Thanks in advance.
EDIT: The code was fine, the problem was that I was using an underscore instead of a dash. so you can use that code to apply a style to a nephew element.
You're using .icongb_canceled in the selector, but the class is icongb-canceled.
Dash vs underscore. They need to match.
You can write .icongb-cancelled ~ .ticket-header-text .bet-text, which is valid in CSS, but also is LESS compatible:
.icongb-cancelled ~ .ticket-header-text .bet-text {
color: blue;
}
.icongb-cancelled ~ .ticket-header-text span {
color: green;
}
<div id="td-status" class="icongb-cancelled"></div>
<div class="ticket-header-text">
<span class="bet-text">TEXT1</span>
<span>TEXT2</span>
</div>
I was interested whether can I pass value to the css class from the html?
Like this
Example:
<div class="mt(5)"> Some text </div>
style {
.mt(#mpx) {
margin-top: #mpx px;
}
}
I've heard that such way was possible in Less
No, the way you want it is impossible in either CSS or any of its supersets (like Less and others). It's always HTML that uses values from CSS and not in opposite. Thus you'll need some scripting for what you need.
You can however pass values from HTML to CSS via Custom Properties using inline styles:
.c {color: var(--c)}
.m {margin: var(--m)}
<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>
Or even like this:
* {
color: var(--c);
margin: var(--m);
/* etc. */
}
<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>
But that method is no way different from styling by the plain vanilla method, i.e.:
<div style="color: blue">
... etc.
It is essentially same ugly and non-maintainable.
Many people try to achieve the goal by generating hundreds of predefined classes like .mt-1, .mt-2, ... .mt-99 etc. (since it's extremely easy thing to do in a CSS-preprocessor). But it's even more ugly solution (I won't bother you with details on why it is so. You'll read about that elsewhere or learn yourself after a few projects).
Maybe this is what you looking for? CSS: Attr()
You can bind the value to an attribute and then get this attribute back in the css, like this:
CSS
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Result
hello world
Here is a way of doing that without the use of LESS.
Use CSS variables:
Variables can be declared in the style attribute of the HTML elements.
Then, the CSS will catch the values from the HTML and apply the correct styles.
Add some JavaScript:
The values of the variables can now be dynamically modified.
⋅ ⋅ ⋅
Example of use:
Background color is set in the HTML, (fixed)
Padding of div1 will grow if clicked. (dynamic)
// When clicking on the div1, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
var pad = this.style.getPropertyValue("--pad");
this.style.setProperty("--pad", parseInt(pad) + 1);
}
.divs {
background: var(--bg);
padding: calc(var(--pad)*5px);
}
<div id="div1" class="divs" style="--bg: #ff6; --pad: 1;">div1</div>
<div id="div2" class="divs" style="--bg: #f66; --pad: 2;">div2</div>
⋅ ⋅ ⋅
About CSS variables:
The variable names must begin with -- and are case sensitive.
These variables values are applied to the element and its children.
To use it globally, you can declare it on the body tag.
Here is a link with some examples: https://www.w3schools.com/css/css3_variables.asp
I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to ?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
The dot denotes that the selector is a class. So it will select elements in your page as such:
.awesome-text-box {
}
<div class="awesome-text-box"></div>
Whereas without the dot denotes an element name. Such as:
div {
}
<div></div>
In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:
p.one {
}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>
Whilst I am here I can give you a list of other common selectors too:
#awesome-text-box => <div id="awesome-text-box"></div> => ID
.btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
p > span => <p><span></span></p> => Child
p span => <p><a><span></span></a><span></span> => Descendant (anything below)
p + span => <p></p><span></span> => Sibling
A '.' refers to a class, while a '#' refers to a id.
When neither a '.' or a '#' are used, the CSS will apply the style to an HTML object.
So for p .one and p .two, the CSS will be applied to the '.one' and '.two' classes that exists within the 'p' object.
For a more detailed example;
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
. means a class. You can call that CSS class with HTML
example
<span class="awesome-text-box"> ABCD </span>
and P means <p> tag in HTML you can call
<p class="one"> ABCD </p>
Ref -
http://www.w3schools.com/css/css_selectors.asp
The dot notation is for class and without dot that would not work. The selector name like div, p don't need dot notation. And use hash (#) for the selector with id.
Ex-
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>
#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
Here . is class selector. It means apply style to all elements which has class awesome-text-box ie,
<div class="awesome-text-box"></div>
while without dot it is tag name like you mention in second example p Here p is tag:
<p>Some text</p>
Similarly p.one apply the style to all p tags which has class one. ie,
<p class="one">Some text</p>
i need to aply a css for a input if his parent is a special class (closeorder)
In this html:
<autocomplete id="items" placeholder="Buscar trabajos" pause="400" selectedobject="selectedObject"
url="http://localhost:801/categories/query/New Company/"
titlefield="type,code,name,price" descriptionfield="Categoria, Codigo, Nombre, Precio"
inputclass="form-control form-control-small selector closeoder"
class="ng-isolate-scope">
<div class="input-group autocomplete-holder">
<form ng-submit="submit()" class="ng-pristine ng-valid">
<button data-toggle="tooltip" title="Añadir seleccion" class="btn btn-tr btn-link animated pulse- btn" style="color:#81BB31; font-size:20px;">
<span class="input-group-addon glyphicon glyphicon-plus"></span>
</button>
</form>
<input id="search_value" ng-model="searchStr" type="text"
placeholder="Buscar trabajos" class="selector ng-pristine ng-valid">
</div>
</autocomplete>
The autocomplete element has inputclass closeorder, how can i set css to the input child?
I tried with this:
autocomplete.closeorder > input {
width: 88% !important;
}
but dont work..
For a complete list of CSS selectors take a look here.
Basically, you seem to need these two selectors:
E[foo~="bar"]
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E F
an F element descendant of an E element
The CSS rule should look like this:
autocomplete[inputclass~="closeoder"] input {
...
}
This reads:
Select any input element that is a descendant of an autocomplete element whose "inputclass" attribute value is a list of whitespace-separated values, one of which is exactly equal to "closeorder".
See, also, this short demo.
(Using !important is rarely a good idea. Learn about CSS specificity and try to avoid !imporant as much as possible.)
A combination of a couple of errors. First remove inputclass and use class
Fix the typo to closeorder in the HTML
and finally use this CSS
.closeorder input[type="text"]{
width: 88%;
}
The !important is not necessary and you should used the !important hack as least as possible.
See DEMO
Working example: http://jsfiddle.net/JVVcA/
HTML:
<fieldset id="data-page">
<legend>data-page</legend>
<button rel="page1">Highlight page one</button>
<button rel="page2">Highlight page two</button>
<div data-page="page1">
<h1 id="page1">Page one</h1>
<h1 id="page2">Page two</h1>
</div>
</fieldset>
<fieldset id="class">
<legend>class</legend>
<button rel="page3">Highlight page three</button>
<button rel="page4">Highlight page four</button>
<div class="page3">
<h1 id="page3">Page three</h1>
<h1 id="page4">Page four</h1>
</div>
</fieldset>
CSS:
fieldset { border: 1px solid #aaa; padding: 5px; }
h1 { background-color: white; }
div[data-page="page1"] h1#page1 { background-color: pink; }
div[data-page="page2"] h1#page2 { background-color: pink; }
div.page3 h1#page3 { background-color: cyan; }
div.page4 h1#page4 { background-color: cyan; }
JS:
$('#data-page button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('data-page', rel);
});
$('#class button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('class', rel);
});
Initial load:
After clicking "Highlight page two" and "Highlight page four" in Webkit (specifically, Google Chrome stable Windows 7):
After doing the same in Firefox:
As you can see, the data-page selector works fine on the initial rendering of the of the page, but when the DOM is manipulated on the fly, styles defined by the [data-page="???"] CSS selector are not affected accordingly. Compare this to the situation with the class selectors. When classes are changed on the fly, the styles change as expected.
A possibly related note is that I've encountered cases while using this attribute selector in conjunction with CSS transitions where a similar lack of responsiveness happens, but on those cases, clicking elsewhere on the page, waving your mouse around, or just waiting for a bit eventually results in the expected change going through.
So is there a way around this other than to just throw up your hands and not use data-page-style attributes?
It's the same issue that's applied for the ~ or multiple + selectors and pseudo-classes in webkit: this kind of selectors are rendered only once and the last time I checked the relevant bug reports in webkit's tracker, they stated that it works like intended.
But, some people had found the fix, but it's really is overhead: to add always-reflowing property to body, so it's must be added only to those elements, where something changes, the divs inside field sets for your example.
So, there is a fixed fiddle: http://jsfiddle.net/JVVcA/2/
And these are the styles for fixing such problems:
/* The `fixing` animation */
#-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
.anElementToFix { -webkit-animation: bugfix infinite 1s; }
Note that you must add the fix to the element whose attribute is can be changed, not the targeted by selector elements.
My version of workaround.
$('#data-page button').click(function(){
var rel = $(this).attr('rel');
var my_div = $(this).siblings("div");
my_div.attr('data-page', rel);
var my_html = my_div.html();
my_div.html(my_html);
});
$('#class button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('class', rel);
});
Running an animation seems overly expensive.
Thanks to Zoltan Olah, I found a much more elegant, concise, and efficient workaround.
Simple toggle a nonsense class on the body. This will cause contained selectors to be re-evaluated.
You don't even have to define this class in CSS. Just applying it forces Safari to hunt through the page re-evaluating things.
Every time you change the attribute in question, toggle this class on or off to force the re-evaluation.
// change some attribute
$(".blah").attr("state", "otherState"); // example of changing an attribute (your app will be different)
$('body').toggleClass('zoltan'); // THIS IS THE LINE YOU MUST ADD EVERY TIME YOU CHANGE THE ATTRIBUTE