We Keep Coding

How to style mat-card-title inside mat-card

I wanted to truncate mat card title for overflow. Using
overflow:hidden
text-overflow:ellipsis
white-space: nowrap
But the style is overriden by the standard mat-card style. I used mat-card-header ::ng-deep for the same but I think ng-deep is deprecated now. Does anyone know of a better approach for the same?

This might help:
<mat-card class="example-card">
<mat-card-header>
<mat-icon>more_vert</mat-icon>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title title="This is a test title header">This is a test title header</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
</mat-card>
and you can override the css class in your component i.e. your component is (app.component.css):
.mat-card-title {
overflow:hidden ;
text-overflow:ellipsis;
white-space: nowrap;
width: 30vw;
}
You must need to specify width for text overflow ellipsis, Thanks

Instead of using the ng deep, you can override the class css.
Go to the main css file common/style and inspect your material class from browser.
Use the full class name which you found from browser.
Apply the css, save and run.

using document.querySelector with complex CSS selectors

In JavaScript I want to use document.querySelector to "grab" the last div (<div class="widget-footer">) in below HTML. However after many tries, I still can't figure out the correct CSS selector syntax to use.
The following code does not work:
document.querySelector (".skin-grid-widgets.ui-sortable.gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1.widget-footer")
Here is the HTML I am working with
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
I've surfed everywhere to find example of complex CSS selectors used with querySelector, but to no avail. Any help would be really appreciated.

Your issue is you need a space in between each child element you are trying to select. If you do not have spaces in between your class selectors, by CSS specification, it will look for both classes on the same element.
Change your selector to look like the following:
var footer = document.querySelector(".skin-grid-widgets.ui-sortable .gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1 .widget-footer");
footer.classList.add("highlight");
.highlight {
background-color: yellow;
}
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>

try this:
<script>
document.querySelector (".skin-grid-widgets .gridWidgetTemplatePositie .widget-footer");
</script>
You don't need to add adjacent classes like "skin-grid-widgets ui-sortable" in querySelector, if you do so then query selector assumes that "skin-grid-widgets" is parent of "ui-sortable". Use just one of the classes at one DOM level.

The selector ain't complex, your thoughts are.
Listen to yourself, to the description you provide of what you want to select:
"grab" the last div in below HTML
Not grab the node with the class widget-footer inside of a node that has all these classes: gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1, inside a node ...
//a utility, because DRY.
//and because it's nicer to work with Arrays than with NodeLists or HTMLCollections.
function $$(selector, ctx=document){
return Array.from(ctx.querySelectorAll(selector));
}
//and the last div in this document:
var target = $$('div').pop();
or
"grab" <div class="widget-footer"> in below HTML
var target = document.querySelector("div.widget-footer");
or the combination: grab the last div.widget-footer in the HTML
var target = $$('div.widget-footer').pop();

css display none on specific page, without page id

I'd like to hide a column in css for only one specific page and i saw several options for it, but every one uses page id. What if two pages have the same id and the differences are only in the class definitions?
I want to use the 'display none' tag only on /Page 2/.
Here is the example:
/Page1/
<body id="body" class="bootstrap-body page-body home_body body-admin-logged" role="document">
/Page 2/
<body id="body" class="bootstrap-body page-body list_page_body category_list_body body-pathway-top body-admin-logged" role="document">
/Column - Page2/
The html code
<aside class="col-md-3 col-sm-12 col-xs-12 column-left">
/Column-Page2/ css code
.column-content-left, .column-left {
float: left;
}
If I use the display none in the css above, it will works perfectly. The problem is that it reflects on /Page1/ too.
Is it possible to do that in css or javascript, without accessing the html?

You can select the body css too like this:
body.list_page_body .column-content-left, body.list_page_body .column-left {
display: none;
}
This should only trigger for the body with the class .list_page_body (or you can use another class specific to that page.

Use a class unique to the second page, for example list_page_body and in your css
.list_page_body .column-content-left, .list_page_body .column-left
{
display:none;
}

It is possible in javascript. Just get the url of the page using window.location.href and add a class or something if it's the page you want the special treatment on.

The classes that distinguish page 2 from page one are: list_page_body category_list_body and body-pathway-top. So you can use any of them to implement your CSS on page 2 without effecting page 1.
Example:
body.category_list_body .column-left{
display:none;
}

You can do it with jQuery by aiming the url path
jQuery(function ($){
var pathname = window.location.pathname;
if (pathname == "/page2/"){
$(".column-class").css("display","none");
}
})

If page 2's body tag has a unique class, you can use the .parent .child {} CSS selector. From what you've provided:
body.list_page_body .column-content-left, body.list_page_body .column-content-left {
display: none;
}
Just so you know, with parent / child selectors, you can use either .parent .child or .parent > .child. The former would select all instances within .parent that the .child class is used in the document:
<body class="parent">
<div class="child">
<div class="child">
</div>
</div>
</body>
In the example above, .parent .child {} would apply rules to both the initial .child as well as the nested .child.
The latter .parent > .child applies to only direct descendants. Using the same example above, only the initial .child element would be selected by .parent > .child. The nested .child wouldn't be affected.

how to make a background-color on a div tag

I have this code:
<div data-role="page" id="two">
<div data-role="content" >
<div id="pic1"></div>
</div>
and this javascript code:
<script type="text/javascript">
document.getElementById("pic1").setAttribute("background-color","red");
</script>
The problem is that my div doesn't get the red color as a background!
What's wrong?

You're looking for the style property on the element, there is no background-color attribute:
document.getElementById("pic1").style.backgroundColor = "red";
That said, generally best to style things with CSS and add/remove classes.

T.J. Crowder beat me to it, but just as a demo, if you were hellbent on using setAttribute, you could do so like this:
document.getElementById("pic1").setAttribute("style","background-color:red");
As you see, the css attribute is background-color, not the html attribute.

how to do css changes only to links that are in side specific div without defining classes to a elements

i want to add some css changes only to the a(link) elements, that are placed inside divs whose class names are defined as "x". (not to all links in the page)
is there any proper way to do that other than defining classes to each and every "a" elements.
<body>
<div class="x"> <a>Home</a></div> <!--to these-->
<div class="x"> <a>contact</a></div><!--to these-->
<div class="x"> <a>about</a></div><!--to these-->
<a>hello</a><!--but not this-->
</body>
if what i'm asking is not clear
consider: i want to change the decoration of a that is placed in side a div,and i can do it like this
.x.m{text-decoration:none;}
<div class="x"><a class="m"></a></div>
but i want to know if there are any other methods to do the same without defining a class to element "a".

you can do this like
.x a {text-decoration:none;}
here is the example js fiddle