Tooltip hover on selected field in angular 2 - html

html code
<td >
<input type="text" class="form-control" value="create.qty[i]" (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty" [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)" >
<div *ngIf="show">
<div *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>
</div>
</td>
I just want to show the selected field but it show hover in every field in dynamic table
enter image description here

instead use boolean property use number like show:number
and set an index (the current) to show on mouseenter/leave and in html ask if show==index
in HTML:
(you do not have to ask twice ngIf only in wrap div)
<input type="text" class="form-control" (mouseenter)="show=i" (mouseleave)="show=0">
<div *ngIf="show==1">
<div>your tooltip 1 </div>
</div>
See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

Related

Text Box Uneditable after clicking continue

Im having issues with a script for a form that when a user clicks continue but not filled in a mandatory question the Additional Comments box becomes read only. the script for said comments box below:
<div class="ui-field-contain" id = 'additionalComment_div' style = 'display: block'>
<fieldset class="ui-grid-a">
<div class="ui-block-a" style="width: 50%">
<label for='additionalComment' id = 'additionalComment' style = '' class='labelbold, required'>Additional Comment</label>
</div>
<div class="ui-block-b" style="width: 50%">
<input type = 'Text' style='width: 100%;text-align: center; text-shadow: none !important;' data-mini='true' name='additionalCommentBox' id='additionalCommentBox' value='' class=' lightBG' >
</div>
</fieldset>
</div>
<!-- additionalComment End -->
I can type in the box before attempting to move onto the next page but not after.
Any help would be great

How to find an element which attribute has exact value and attribute name starts with given pattern with xpath

I would like to find an element which attribute has exact value and attribute name starts with given pattern.
HTML:
<div class=col-xs-12>
<select name=registrationProcedureCode tabIndex=-1 class="form-control selectized" id=registrationProcedureNew style="DISPLAY: none" data-bind="options: [''], value: registrationProcedureCode, optionsCaption: i2chCaption" jQuery1124022385363269720443="36" __ko__1582114720513="ko21">
<option value="" selected></option>
</select>
<div class="selectize-control form-control single">
<div class="selectize-input items not-full" jQuery1124022385363269720443="139">
<input tabIndex=-32768 style="WIDTH: 337px" type=text autocomplete="off" placeholder="bla" jQuery1124022385363269720443="141">
</div>
<div class="selectize-dropdown single form-control" style="WIDTH: 627px; LEFT: 0px; DISPLAY: none; TOP: 34px" jQuery1124022385363269720443="136">
<div class=selectize-dropdown-content></div>
</div>
</div>
</div>
And there are some other div elements with jQueryblabla attributes.
So I need to find this div element with attribute value 139 and attribute name starting with jQuery.
I tried this line:
//div[#*[starts-with(name(), 'jQuery')]='139']
But it is wrong. Please let me know how to fix it.
The correct way to write my xpath expression is
//div[#*[starts-with(name(), 'jquery')]='139']
Cheers to #JackFleeting!

How to get data from a div in AngularJS

I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>

How do I have both my drop down list divs sit side by side to each other

Cant seem to get these two lists to sit side by side rather than on top of each other , here is my code, any guidance would be much appreciated!
Here is my code
<div class="panel-body">
<div class="monthSelect">
<div class="form-group">
<label for="yearValues">Select Year</label><br /> <!--Delete if necessary-->
<div class="yearSelector" >
<select ng-model="selected.year" ng-options="year.year for year in yearValues">
<option value="" disabled>Select year</option>
</select><!--Select ng-model-->
</div><!--YearSelector Div-->
<label for="exampleInputPassword1">Select Period</label>
<div class="periodSelector">
<!--periodValues must correspond with the name of the array-->
<select ng-model="selected.period" ng-options="period.period for period in periodValues">
<option value="" disabled>Select Month</option>
</select> <!-- select ng-model -->
</div><!--close periodselector-->
</div><!--Div class form-group-->
</div><!--Div class: Month Select-->
</div><!--Div class: Panel Body-->
</div><!--Div class panel: Default-->
</div><!--Div class col-md-12-->
</div><!--Div class: Row-->
<!--Customer report Generator-->
<!--LynchReport Generator-->
There are may ways you can achieve this try any of these
use a table
wrap your contents in one single HTML table row.
<table>
<tr>
<td> field 1 </td>
<td> field 2 </td>
</tr>
</table>
or
use style="float:left" for each element you need on a single line. use proper margin to have enough spacing between them
<div style="float:left;margin:2px;">
field 1
</div>
<div style="float:left;margin:2px;">
field 2
</div>
Another way is to use bootstrap as your code already look like you are already using that,
check this link on how to align your divs. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
can very well align your code. your can change the number 6 to other values say 1-12 for proper alignment.

Date with bootsrap in 3 drop downs in form

I have an issue I have a form, where i would like to have a 3 drop downs for day / month / year, but all does drop down are placed big one under another but i would like to have it small and horizontal.
Any idea how to do it?
<div class="form-group">
Date:
<Select ... />
<Select ... />
<Select ... />
</div>
This gives me this:
But i would like to have it smaller and next to each other ...
you have to read bs3 Docs
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
this would work in your case:
<div class="form-group">
Date:
<div class="col-xs-4"><select /></div>
<div class="col-xs-4"><select /></div>
<div class="col-xs-4"><select /></div>
</div>
You could use form-inline..
<form class="form-inline">
<div class="form-group">
Date:
<select class="form-control"><option>One</option></select>
<select class="form-control"><option>Two</option></select>
<select class="form-control"><option>Three</option></select>
</div>
</form>
http://www.bootply.com/126815