We Keep Coding

Hide text completely if it overflows with css

I would like to hide text completely if it overflows.
overflow: hidden won't work for me here, because it will cut off the text.
I would like to use something that "detects" if the text is cut off, and if so it should be removed or not displayed. In this case only one word (or if you want so the word that would get cut).
A pure CSS solution if this is possible would be great. If there is no other way, JS would also be kind of ok.
For my example see the following images. The arrow is inserted by a pseudo class ::before
How it looks when it's fully displayed
How it looks like now when it overflows
What I want it to look like when it overflows
.somediv {
width: 100%;
}
.somediv_2 {
width: 20px;
}
.someanchor {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
background-clip: padding-box;
border-radius: 0;
background: transparent;
font-weight: 500;
color: #000;
box-shadow: inset 0 0 0 1px #000;
line-height: 1.75rem;
padding: .125rem .625rem .125rem .625rem;
display: inline-block;
}
.someanchor::before {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
width: 100%;
height: 100%;
}
<div class="somediv">
<a class="someanchor">
Info
</a>
</div>
<div class="somediv_2">
<a class="someanchor">
Info
</a>
</div>
I made the second button smaller to simulate it. In my case it gets smaller by resizing the viewport, because it's pushed by other elements in a table.

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.

You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ

You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.

Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}

If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Z-Index of Material Dropdown component not layering underneath a fixed div when opened

Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect

The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}

You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}

Kendo Panel Bar Change collapse icon

Hi was trying hard to replace the kendo panel bar expand and collapse icon with bootstrap glyphicon-chevron-right. One way I can think is using javascript, literally replacing each and every state of icon. I have also noticed that kendo panelbar adds the following css to the span like:
k-icon k-i-arrow-s k-panelbar-expand -- when collapsed
k-icon k-i-arrow-n k-panelbar-collapse-- when expanded
I have tried doing this
#leftcontentnav .k-panelbar > li > span >.k-icon {
background-color: transparent;
opacity: 0.8;
border-color: transparent;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
background-repeat: no-repeat;
font-size: 0;
line-height: 0;
text-align: center;
background-image: url('../Images/download.jpg');
}
But I have downloaded a glyphicon and even that doesn't work properly.. is there any solution?

An important thing to realize about Glyphicons, is that they're font characters. If you want to use them to replace the icons purely with CSS it's a simple matter of hiding the existing icon, and inserting a Glyphicon in it's place.
First hide the Kendo icon image, and add the appropriate font:
.k-panelbar .k-icon {
background-image: none;
font-family: 'Glyphicons Halflings';
font-size: 1em;
overflow: visible;
}
Then insert the character you wish to use with the ::before selector:
.k-panelbar-expand::before {
content: "\e114"; /* glyphicon-chevron-down */
}
.k-panelbar-collapse::before {
content: "\e113"; /* glyphicon-chevron-up */
}

You can do with changing the position of the image on the glyphicon in your css
example:
.k-i-arrow-s { background-position: -96px 0; }
.k-i-arrow-n { background-position: -120px 0; }
You must calculate the position on your glyphicon image.

Image rotate pagination question

trying to get the pagination inside the main area display to look a little better. Where it has the pagination, i would like the active states to be formatted to fit perfectly inside the appropriate boxes without the numbers showing but having some difficulties.
you can view the image rotate pagination issue here:
http://obliqueinteractive.com/demo/oblique/
Here is the code im working with for the pagination:
HTML
<div class="paging">
1
2
3
</div>
CSS
.paging {
position: absolute;
bottom: 10px;
left: 372px;
width: 189px;
height:41px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
background-image: url(../images/active.png) ;
width:12px;
height:11px;
}
.paging a:hover {
background-image: url(../images/active.png) ;
}

.paging a {
background-repeat:no-repeat;
background-position: x-offset
y-offset; }
change offsets in pixels to fit Your layout
and change content of to:
$nbsp;