I just want to hover over a small colored circle created using ng-class.
Can someone help to find it out? I used the following code. But :hover is not working. Then I tried using ng-mouseover and ng-mouseleave. Then its almost working, i could say. But the text to be displayed upon hovering is blinking.
$scope.hoverIn = function(){
this.hoverEdit = true;
};
$scope.hoverOut = function(){
this.hoverEdit = false;
};
.Green{
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
}
<tr ng-repeat="(key,value) in statusMap">
<td>{{key}}</td>
<td><span ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"
style="margin: 5px 15px 5px 15px" ng-class="
{'Green':'{{value}}'==='Up','Grey':'{{value}}'==='Down'}"></span>
<span ng-show="hoverEdit" ><a>{{value}}</a></span></td>
</tr>
On hovering over this shape,
I want to show up/down status.
Related
We have had a Kendo Angular implementation in place for several years now. We recently updated Kendo and Angular and we found that a click event we placed on a is now broken.
We have an outer div which contains our combobox and another div with an icon containing a click event that is broken. See the screenshot with the red arrow pointing to the broken div icon.
Below is the HTML and the css governing the div.
<div *ngIf="values.length < maxCardinality"
class="editor-row">
<kendo-combobox #selectBox
[data]="connectionCandidates$ | async"
[textField]="'_id'"
[valueField]="'name'"
[filterable]="true"
[placeholder]="'Search...'"
(selectionChange)="handleComboBoxValueChange($event)"
(filterChange)="handleFilter($event)"
class="reference-combobox">
<ng-template *ngIf="resultCount >= 50" kendoComboBoxNoDataTemplate>
<span i18n>50+ partial matches. Type more.</span>
</ng-template>
<ng-template *ngIf="resultCount == 0" kendoComboBoxNoDataTemplate>
<span i18n>No results found.</span>
</ng-template>
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="row">
<div *ngIf="hasConnectionTo(dataItem)"
class="checkmark"></div>
<span class="item"
[ngClass]="{
connected: hasConnectionTo(dataItem)
}">
{{ dataItem.name }}
</span>
</span>
</ng-template>
</kendo-combobox>
<div
class="picker-button"
*ngIf="values.length < maxCardinality"
(click)="handleClickReferencePicker($event)"></div>
</div>
The Div at the end of this with the class "picker-button" is the broken click event.
CSS for the picker-button
.picker-button {
position: absolute;
top: 6px;
right: 32px;
cursor: pointer;
user-select: none;
outline: none;
display: flex;
flex: 0 0 auto;
align-content: center;
justify-content: center;
width: 24px;
height: 20px;
background-size: 20px 20px;
background: url($assets-dir + '/picker_multiple_blue.svg') 3px 2px no-repeat transparent;
&.disabled {
background: url($assets-dir + '/picker_multiple_grey.svg') 3px 2px no-repeat transparent;
}
}
I omitted the rest of the CSS file as I don't think its relevant.
I have moved the div outside of the div containing the combobox and I can get the click event to work. I have tinkered with removing some CSS elements as an experiment to no avail. Its worth nothing this is all within a kendo grid cell. Anyone that can toss any help would be great.
I was able to fix this by adding a z-index: 2; to the picker-button class. The Combobox updates added a z-index of 1 causing it to overwrite our click event.
I have a table and when hover on certain data of a table column i'm displaying a tool tip. Following image shows it. The issue is when hovering the bottom records, the height of the table won't increase to make room to the tool tip.
The following image shows when hovering data of the top of part of the table. There is no issue with this.
But when hovering bottom part of the table , the position of the tool tip will become incorrect as shown in the following figure (Here i have hovered the last record of the table)
I tried giving much higher hight for the table manually. Then i can get the expected behaviour
I do not want to give the table height manually , i want it to increase height automatically. How can i achieve this target
Table code is as follows
<Table responsive striped borderless hover>
<thead>
<tr id="table_col_names">
<th className="label_type2 pl-lg-5 pl-xs-2 pb-4">Allowed Stations</th>
</tr>
</thead>
<tbody>
{consumers.consumerData && consumers.consumerData.map((item, key) => {
return (
<tr key={key}>
<td className="cell_style pl-lg-5 pl-xs-2">
<OverlayTrigger
placement='bottom'
overlay={
<Tooltip bsPrefix="consumer_tooltip">
{Object.values(this.groupData(item.allowedChargingStations)).map((evc,key) => {
return (
<div>
<p>{evc.groupName}</p>
{evc.stations.map((evcStation, key) => {
return (
<p className="ml-3">
<li>{evcStation.name}</li>
</p>
)
})}
</div>
)
})}
</Tooltip>
}
>
<label className="cp">{item.allowedChargingStations.length} stations</label>
</OverlayTrigger>
</td>
</tr>
)
})}
</tbody>
</Table>
i have used react bootstrap component OverlayTrigger and Tooltip for the tool tip.
tool tip css
.consumer_tooltip{
background: rgba(24, 68, 119, 0.5);
backdrop-filter: blur(10.8731px);
border-radius: 4px;
font-size: 14px;
width: 160px;
padding-left: 10px !important;
padding-top: 20px !important;
font-weight: 600;
margin-left: 64px;
margin-top: 10px;
pointer-events: none;
}
.consumer_tooltip:before{
content: ' ';
height: 0;
position: absolute;
width: 0;
left: 18px;
top:-20px;
border: 10px solid transparent;
border-bottom-color: rgba(24, 68, 119, 0.5);
}
I am working with a template. The client is wanting the three buttons different colors. All three are controlled by the same class. I can change the background color to be different if I inspect the page and I can insert it in the element style. How can I make this change permanent in the CSS?
This is the current buttons:
This is how the client would like the buttons:
The CSS controlling this is:
.full-width .generic .third p a {
background-color: #543D91;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
float: left;
padding: 10px 0;
width: 100%;
border-radius: 99em;
}
How can I change this so that each button is a different color? Is this even possible? It has to be done in CSS. I can not use JavaScript/jQuery or anything like it. It has to work in a JSFiddle in only the CSS and HTML. Note that the HTML is created only the label for each button. I cannot make the hyperlink have a style.
If this is not possible can you please give me the codes that I can have 3 images centered with buttons in a container that is 900px with padding between? I appreciate everyones help!
You could use 2 classes and create a CSS like:
.cls {
color: #FFF;
padding: 10px 0;
width: 30%;
}
.c1 {
background-color: #F00;
}
.c2 {
background-color: #0F0;
}
.c3 {
background-color: #00F;
}
<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>
I have tried to solve your question using jQuery, try and have a look, it's simple and works like magic:
This is the dummy HTML:
<div id="searchable">
<a>
Something
</a>
<button>
Something
</button>
<a>
Something2
</a>
<button>
Something2
</button>
<a>
Something3
</a>
<button>
Something3
</button>
</div>
This is the required jQuery for this:
var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
$(this).css('color', color[i]);
});
Here is a link to my fiddle:
https://jsfiddle.net/x5ve63w5/1/
To implement some fancy round progress bars, I used an element with border radius and overflow:hidden. Everything looks fine, except one thing: all browsers display a thin line where the overflow ends.
here's some simple snippet that reproduces this bug in all major browsers:
function setMarginLeft(value){
var element = document.querySelector(".overflowing");
element.style.marginLeft = value+"px";
}
function setMarginTop(value){
var element = document.querySelector(".overflowing");
element.style.marginTop = value+"px";
}
.backdrop {
background-color: white;
padding: 10px;
width:100px;
height:100px;
}
.circle {
background-color: red;
width:100px;
height:100px;
border-radius: 100px;
overflow:hidden;
}
.overflowing {
width:200px;
height:200px;
margin-top: 10px;
margin-left: 10px;
background-color:#fff;
}
input {
margin-top:10px;
}
<div class="backdrop">
<div class="circle">
<div class="overflowing"></div>
</div>
</div>
<span>top and right of the circle you should see some red, bottom left not</span><br />
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="10"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="10">
since the layout isn't nearly as easy as the snippet above, i can't change the layout much.
i guess the essential problem here is the browser's anti-aliasing, which i think is not alterable by css, or is it?
i googled myself stupid on that matter and can't come up with really usefull ressources. i guess if nothing else works, i'll have to do it anew in SVG or on a canvas -.-
Not fully supported right now but overflow-clip-margin could be a solution:
overflow: hidden; // for unsupported browsers
overflow: clip;
overflow-clip-margin: 2px;
Note: I don't fully understand your example but for my situation I had a title
bar that was getting a white line around it (inside the border). This is an exaggeration with overflow-clip-margin: 5px but if it's only 2px then it matches with the blue border on the white box.
This seems possible without the overlay by using a background-image with multiple linear-gradients. The JavaScript to insert the two values into the combined linear-gradient is rather clunky as I wrote it hastily to prove the solution. It can be better!
Tested in Chrome only.
var marginTop = marginLeft = 0;
function setMarginLeft(value) {
marginTop = value;
applyToCircle();
}
function setMarginTop(value) {
marginLeft = value;
applyToCircle();
}
function applyToCircle() {
var element = document.querySelector('.circle');
element.style.backgroundImage = 'linear-gradient(90deg, red '+ marginTop + '%, transparent 0%), linear-gradient(180deg, red '+ marginLeft + '%, transparent 0%)';
}
.backdrop {
background-color:white;
padding: 10px;
width:100px;
height:100px;
}
.circle {
width:100px;
height:100px;
border-radius:50%;
}
input {
margin-top:10px;
}
<div class="backdrop">
<div class="circle">
</div>
</div>
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="0"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="0">
I have been having a difficult time positioning a Facebook Like & Send button combination. I finally was able to control the vertical positioning using a table and CSS. The code and CSS are below. Now, I cannot control the horizontal positioning. No matter what I do, the Like button is about 7 pixels from the left side of the browser. Even if I put a handful of  s in the column before the Facebook code, the Like button is just 7 pixels from the left side of the screen. The code and CSS I am using is below, and they don't change the horizontal positioning of the Facebook Like and Send buttons.
Any idea how I could move the Facebook Like & Send buttons 100 pixels from the left side of the screen?
Thanks in advance,
John
The code:
<table class="like">
<tr>
<td>
</td>
<td>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</td>
</tr>
</table>
The CSS:
table.like {
margin-top: 140px;
margin-left: 50px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #000000;
width: 450px;
table-layout:fixed;
background-color: #FFFFFF;
border: 2px #FFFFFF;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;
text-decoration: none;
vertical-align: text-bottom;
}
table.like td {
border: 0px solid #fff;
text-align: left;
height: 10px;
width:100px;
}
The FB script is inserting code as a child of the element fb-root. Any CSS you want to use to position the elements should be applied to fb-root. That would eliminate the need for the table.
Take the empty #fb-root div tag and closing tag and place them directly after your opening body tag.
Then wrap the script in the div and class of your choice and style however you'd like.
<body>
<div id="fb-root">
</div>
<div id="wrapper">
<div id="socialMedia">
<-- fb button script -->
</div>
</div>
</body>