I just want to add a tooltip to the element which is clicked.
Tooltip is added to all repeat elements when clicked. Please help me.
<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" >
<div class="shadow img_cont">
<img src="{{menu.itemimage}}" class="item_img">
<div ng-repeat="innerItem in menu.pricelist | limitTo:1">
{{innerItem.itemprice}}
</div>
</div>
<div>
{{menu.menuitemname}}
</div>
<div ng-repeat="menu in addToCart" class="add_circle" ng-show="circle">
{{menu.quantity}}
</div>
</div>
</div>
Change the div in:
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" ng-class="{'clicked': menu.clicked}">
In getTool method
menu.clicked = true;
but you should put clicked:false to all others menu in items
Related
I have a navigation that is horizontal. Under every choice I have a div that opens up on click. But the problem is that it binds it's position to the parent navigation button. I want every div that opens on the exact same spot. I want every child div that opens to open from the first element in the navigation bar.
So in this case i want the white open div to bind to "Nyheter" instead. I really can't solve it, I tried set a div element before the navigation that all div that opens binds to in css but it not seems to work.
<div class="Container">
<nav class="NavHorizontal Grid Grid--alignMiddle">
#Navigation.RenderNavigation("master/navigationDesignHeader.cshtml", navigationSettings)
</nav>
</div>
//NavigationDesignheader.cshtml under this line
var elementId = 1;
foreach (var node in nodes)
{
var idElement = "megaMenu" + elementId;
<div class="NavHorizontal-item Grid-cell u-sizeFit" id="#idElement">
<a class="Button Button--tab navigationHeaderLink u-pointer" onclick="toggleMenu('#elementId')">
#node.Name
</a>
#RenderMegaMenu(node.Nodes, node.Link, node.Name)
</div>
elementId++;
}
Megamenu:
<div>
<div id="megaMenuDropdown" class="Container megaMenuDropdown-content displayNone">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-sizefull u-mt-10">
#nodeName
<div class="megaMenuToggle-closeBars u-pointer" style="float:right">
<span class="megaMenuToggle-closeBar"></span>
<span class="megaMenuToggle-closeBar"></span>
</div>
</div>
</div>
<hr class="colorBlue" />
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in firstColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
#if (moreThanTen)
{
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in secondColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
Any suggestions?
Im trying to click on the first element that look like this:
<div>
<div class="report-name" data-qa="x1x">
<div tabindex="0" class="af-core keyboard-navigation-element gray-link"><a class="af-core link-with-arrow right " target="_blank">boxes</a></div>
</div>
<div class="report-name" data-qa="x2x">
<div tabindex="0" class="af-core keyboard-navigation-element gray-link"><a class="af-core link-with-arrow right " target="_blank">bags</a> </div>
</div>
</div>
i tried this 2 lines of code:
await page.click('div[data-qa="x1x"]');
await page.$x("//a[contains(text(), 'boxes')]");
but I cannot click on it.
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I am trying to find the parent of the span element with label First Name and go up the DOM until i get to the input element with class "mat-input-element"
I have attempted with the following xpath, but did not get the result i needed:
//div/div/span[contains(.,'First Name')]/parent::div[#class='add-users']/lib-text-input-v3/div/mat-form-field/div/div/div[1]/input
Any help would be appreciated. Thanks!
You can try with the below xpath.
//span[normalize-space(.)='First Name']/ancestor::div[#class='input-v3']//input[#class='mat-input-element']
Sample HTML: From jsfiddle
<html><head></head><body>
<div class="add-users">
<lib-text-input-v3 errortext="”Error" a="" valid="" first="" name”="">
<div class="input-v3">
<mat-form-field class="mat-form-field">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<input class="mat-input-element" type="text">
<span class="mat-form-field-label-wrapper">
</span>
</div>
</div>
<div class="mat-form-field-underline>
<span class=" mat-form-field-ripple"="">
</div>
<div class="mat-form-field-subscript-wrapper">
<div class="mat-form-field-hint-wrapper">
<div class="mat-form-field-hint-spacer">
</div>
</div>
</div>
</div>. //closes mat-form-field-wrapper class
</mat-form-field>
<div class="input-v3__label"> // same level as input-v3 class
<div class="input-v3__label--text">
<span class="ng-tns-c11-01">First Name
</span>
</div>
</div>
</div> // closes input-v3 class
</lib-text-input-v3>
<lib-text-input-v3>…..
</lib-text-input-v3></div></body></html>
I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>