We Keep Coding

text glyph clip angular material font override

I'm having trouble with text glyphs getting clipped in angular material input lables. I have a custom font override happening that seems to be the source of the issue (if I set the font back to roboto the font no longer clips).
$custom-typography: mat-typography-config(
$font-family: 'Open Sans, sans-serif'
);
For context it was also clipping in the input text fields but I was able to fix that with this rule:
input.mat-input-element {
height:100%;
}
Has anyone come across this problem?

This seems to be an issue with Open Sans itself, see: https://codepen.io/winkerVSbecks/pen/jZKbze
font-family: "Open Sans", sans-serif;
height: 18px;
font-size: 16px;
padding: 0;
When input has padding 0 and the difference between height and font-size is less than 4px it seems to clip the text. I have no idea why it does this, but at least we know that this is not an issue caused by ng-material.

I work at Google on the Google Fonts team, and I've filed this at https://github.com/google/fonts/issues/1457 to track its resolution

I am trying to use JS/JQuery to automatically perform multiple find and replace actions on text in a website

I’m having issues with multiple replacements, I am wanting to replace the three words of a company name throughout the website with the company colours, I really don’t want to go through and manually add a span for each of the three words individually although I know this would work, is there anyway of doing this with code? BTW I’m a novice at JS/JQuery, etc.
I have had a go I can get one to work but when I try to do more than one only the last one works, it seems as though the last one cancels out the others.
I am happy enough with the CSS as this can easily be changed later.
Here is my code. - http://codepen.io/TechieBloke/pen/dMmNRB
var text = $('div').text().replace(/dummy/g, "<span class=artblack>dummy</span>");
$('div').html(text);
var text = $('div').text().replace(/Ipsum/g, "<span class='artgrey'>Ipsum</span>");
$('div').html(text);
var text = $('div').text().replace(/Lorem/g, "<span class='artred'>Lorem</span>");
$('div').html(text);
And here is the accompanying CSS
.artblack {
color: orange;
font: 15px arial, sans-serif;
}
.artgrey {
color: blue;
font: 15px arial, sans-serif;
}
.artred {
color: red;
font: 15px arial, sans-serif;
}

You modify the html each time, but then go back to text to use as source for the next change; just be more consistent and use html() instead:
$('div').html().replace()

JavaScript not showing red cross

Hi guys so i am getting back search results using javascript and i am struggling to make a Red cross appear on the right hand side.
So when the user searchs through my db and the result appears i would like an X to appear to the right of it.So example :
Search result 1 X
I have made the X in CSS:
#markx {
color: Red;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 40px;
height: 40px;
border-radius: 5px;
}
My code:
$(".result li").click(function(){
var text= $(this).text();
$('.selectedStuff').append('<li>' + text +' (selected)<span id="markx">×</span></li>');
});
For some reason those its no appearing like i want it to in javascript. In css its fine, but obviously i want the X to appear alongside every search request that i make so later on the user can cancel that request.

In my opinion, you are overthinking this by using JS to get your dynamic X. You can achieve this in a much lighter way with CSS specificity and pseudo-selectors.
Use this:
.selectedStuff > div{
width:300px;
}
.selectedStuff > div:after{
content:" x ";
font-family: Arial;
color: red;
position:relative;
float:right;
right:-20px;
}
In the same fashion I added the width to the .selectedStuff class through the CSS, you can do that for all the other properties as well instead of hardcoding them inside the jQuery. This makes your code more maintainable.
The X is a simple letter X but if you want something better looking, use the fontAwesome library and add it as an web font icon.
Here is a DEMO
P.S. I noticed in your JS you meant to produce a series of LIs but the code rendered DIVs instead when I ran it in CODEPEN. If yours produces LIs, just replace the > div my CSS above for > li

changing text font through css for specific text in d3

I am using the d3 framework and I am trying to specify the font the following element using css (I want to use a custom font, that is why I am using css).
var anchorNode = svg.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle");
anchorNode.append("svg:text").text("test");
I tried using
text {
font: 2px Arial;
pointer-events: none;
}
but this does not work for this specific text. I am assuming it is because the text is appended to the node. What would be the correct syntax to access the text in css?

Do you have a link to the rendered HTML or a jsfiddle?
It looks like your appending a class called anchorNode. You could possibly updating the CSS font for that class:
.anchorNode {
font-family: "Times New Roman", Times, serif;
font-size: 2px;
}

Automatic keyword highlighting in webpage

I am trying to figure out, how can I create some DOM elements, for example a <div> so I can use it as a special code placeholder. (Not the default <code> tag)
For example, I use <div>'s (with some class) and any words in that <div> that are like, keywords in some programming language, they will change color automatically - depending which sort of keyword they are; string, number, function etc.
Here's an example
That page has multiple <div>'s and all keywords in them are in some special color.
How can I make that?

Well, it's fairly straight-forward - FIDDLE.
The variations on the theme are truly infinite.
CSS
.bigred {
font-size: 21px;
color: red;
}
.littlegreen {
font-size: 16px;
color: green;
}
.blueitalic {
fond-size: 18px;
color: blue;
font-style: italic;
}