We Keep Coding

How to apply a border on an html element based on some enum properties with angular?

i have this component where based on an enum i color the background of a td using [ngStyle], i was wondrering if there was a way to make it better by just adding a border to it instead of coloring the whole td like images below:
And make it like this:
This is my style.css
.ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
.ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
background: unset !important; //Change the existing color to `unset`
backdrop-filter: saturate(2) brightness(90%);
} // apply saturation over background
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f0f0;
transition: none !important;
}
input.ng-touched.ng-invalid,
textarea.ng-touched.ng-invalid,
select.ng-touched.ng-invalid,
ng-select.ng-touched.ng-invalid,
nz-input-number.ng-touched.ng-invalid,
nz-select.ng-touched.ng-invalid,
nz-date-picker.ng-touched.ng-invalid,
nz-range-picker.ng-touched.ng-invalid {
border-left: 3px dashed #faad14 !important;
border: 1px solid #faad14;
} // if form is invalid apply style like second image
.ng-select.add-hours-hours.ng-touched.ng-invalid {
border-left: 3px dashed #faad14 !important;
border: 1px solid #faad14;
}
In my component.html
<tr [ngStyle]="{ 'background-color': getColorByRegistrationInsertStatus(registration) }">
And finally in my component.ts
getColorByRegistrationInsertStatus(registrationControl: AbstractControl): string {
switch (registrationControl.get('registrationInsertStatus')?.value) {
case RegistrationInsertStatus.Success: return "#52c41a";
case RegistrationInsertStatus.Warning: return "#fcc354";
case RegistrationInsertStatus.Error: return "#ff4d4f";
default: return "#FFFFFF";
}
}
All i want is to apply the second image style using what i have done above or with something else...
The problem is that i do not know how to apply the second image style to the html using[ngStyle]. Maybe [ngStyle] really isn't the way and there is something different that work, i do not know. Can someone please help me... Big Thanks!
I tried this:
[ngStyle]="{ 'border-left': 3px dashed getColorByRegistrationInsertStatus(registration) }"
but it won't work...

Vertical line before hover CSS

I'm trying to show an image when a path on the site is hovered.
The hover part works well. However, when I "mouseout" the path, the image is removed but a red vertical line is always there.
This is my css :
.imgElu {
height: 23%;
width: auto;
position: absolute;
bottom: 33.1%;
left: 36.7%;
border-radius: 50%;
border: 3px solid #ac2c2d;
}
When not hovered :
When hovered :
I tried to use DOM to set display : "none" when the event "mouseout" is triggered. But the line is always briefly displayed before showing what you can see in the second photo.
Any help is appreciated.
UPDATE : I understood why I got this red line briefly when hovering a path : it's because the image is an url and is loading. And until it's not load, the css is "bordering" nothing. Now I'm searching to show nothing until it's not loaded, how can I do that ?
UPDATE 2 : this is my js code :
siege[0].addEventListener("mouseover", function() { //when mouseover
var actualImg = siege.Vignette; //gets the url Image
document.getElementById("photoElu").src = siege.Vignette; //puts the url on the img div
if (eluPresent == false) {
$('<p class="tooltip"></p>').text("Siège non occupé").appendTo('body').fadeIn('slow');
} else { //If there is something to show :
$('<p class="tooltip"></p>').text("Siège n°"+siege.Seat+" "+siege.Name).appendTo('body').fadeIn('slow');
document.getElementById('photoElu').style.border = "3px solid #ac2c2d"; //sets the css to the img div
}
siege.animate(hoverStyle, animationSpeed);
}, true);
siege[0].addEventListener("mouseout", function() { //when mouseout
$('.tooltip').remove();
document.getElementById("photoElu").src = ""; //remove the url
siege.animate(style, animationSpeed);
document.getElementById('photoElu').style.border = "0px solid #ac2c2d"; //sets the css to remove the border
}, true);

It's a border which is 3px in width that is being displayed, give your image style of box-shadow as an alternative to this problem.

Initially hide the content.
.imgElu {
height: 23%;
width: auto;
position: absolute;
bottom: 33.1%;
left: 36.7%;
border-radius: 50%;
border: none;
display: none;
}
You need to set border property when the div is hovered.
.imgElu:hover {
border: 3px solid #ac2c2d;
display: /*your display setting*/
}

Use
border: 0px solid #3c2c2d;
In your normal state, and
border: 3px solid #3c2c2d;
in your hover state.
If you are adding hover style using jquery, use jquery .css() method.
Hope this help

expand div on click Polymer js without jquery

I'm using Polymer but I'm having some trouble with events and the such. I want to create an expanding search bar, similar to
My current code looks something like the following:
Code:
// This is where things are a little unclear for me. So far, I have tried the following:
expand: function() {
var divToStretch = this.$.stretchMe;
if ( /*search bar is open*/ ) {
//remove "stretched" css from "stretch" div
} else {
//add "stretched" css to "stretch" div
}
}
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
.stretched {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>

May I suggest a pure CSS alternative? You can make your search bar receive focus, by adding tabIndex="0". This way you can provide a style for div.stretch:focus, allowing you to dynamically change its size when the user clicks or focuses on the element and making it small again when the user focuses on something else.
It's really simple, elegant, does not need a lot of code and does what you need. Give it a try!
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:focus {
width: 500px;
}
<div class="stretch" id="stretchMe" tabIndex="0">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
Alternatively, you can make it do the same thing on :hover, if that's what you are after, simply by changing the selector. Or combine both, if you prefer. Below is a :hover example.
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:hover {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>

You can use the toggle method of the classList for this:
expand : function() {
this.$.stretchMe.classList.toggle('stretched');
}

The classic way would be as following:
if (/*search bar is open*/) {
divToStretch.style.width = "auto";
} else {
divToStretch.style.width = "500px";
}
But I highly recommend using this.$.stretchMe.classList.toggle('stretched');
Read more here

Ag-Grid - How to Set Border Bottom for the Last Row

I am using Ag-Grid with React and I can't seem to be able to figure out how to show the border-bottom after the last row. The grid looks incomplete without it. See the attached image.
Need the border bottom after the last row
I tried to set the following CSS, but it doesn't work:
.ag-footer-cell-entire-row {
border-bottom: solid 1px black !important;
}
In the documentation, I also looked at the rowStyle property and tried to use it but I can't figure out how to determine if the current row is the last row. I will greatly appreciate if someone could point me in the right direction.

Using rowStyle is really close... You will actually need to use getRowStyle which you will need to return an object of CSS values per the docs. Here is an example of what your function will look like:
gridOptions = {
...
getRowStyle: lastRowBorder
...
}
function lastRowBorder(params){
if (params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1){
return {border-bottom: thick green}
}
else {
return {}
}
}
I believe that this comparison params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1 will work in all cases, but I haven't tested it myself. There is a params.api.lastChild, but I am unsure if that is only true for the last row node or if it is true for the last node for groups... which is what you seem to be doing. In any case it would be beneficial to console.log the params if the comparison that I provided doesn't work.
As a side note, going the route of trying to use css selectors to try to reach the last-child won't be the cleanest solution in most cases since ag grid relies on absolute positioning... meaning that the last row in the grid could be in the middle of the DOM

This is the top result when Googling "Set bottom border in agGrid". The issue I was having was that applying a border to the grid body was not rendering a border on the bottom of the grid (e.g. regardless of how man rows were present, I wanted the grid itself to have a border all the way around). After some tinkering, here is my solution
.grid-container {
height: 70%;
margin: 10px 20px 0 20px;
.ag-header {
border: 1px solid black;
border-bottom: none;
}
.ag-body {
background-color: #fdfdfd;
border-bottom: 1px solid black;
}
.ag-body-viewport-wrapper {
border: 1px solid black;
border-top: none;
}
.ag-body-viewport {
border-bottom: 1px solid black;
}
}

Border width based on screen size

I am creating diagonal top and bottom pieces to sections on a website.
I was wondering if there is a simple jquery solution to style the border width based on the screen size? I can't use a set long size with overflow: hidden because the diagonal line isn't the correct angles.
The only way I can see to make the angles consistent is to have jquery set the border width based on the screen size.
.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}
.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}
.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}
Jquery would then generate a style that would read
.odd-section-top {
border-left-width:
}
.odd-section-bottom {
border-right-width:
}
And populate the numbers based on the screen size.
Thank you!

You could do everything within Javascript:
var borderWidth = $elem.css("border-left-width");
$(".odd-section-top").css("border-width", borderWidth);
You can adapt it to your desired logic.

Tried this but I know I messed up some of the syntax. I'm still newer to javascript and jquery. Is this on the right track?
<script>
$(document).ready(function () {
responsiveradio.initBorders = function () {
var $window = $(window),
$topOddBox = $('.odd-section-top'),
$botOddBox = $('.odd-section-bottom'),
$topEvenBox = $('.even-section-top'),
$botEvenBox = $('.even-section-bottom'),
;
function resetBorders() {
var w = $window.width(),
$topOddBox.css('border-left-width', w);
$botOddBox.css('border-right-width', w);
$topEvenBox.css('border-left-width', w);
$botEvenBox.css('border-right-width', w);
}
});
</script>