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
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
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!
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>
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.
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