I have a NumberInput defined thus:
[FindByXPath("//input[#class='form-control ']")]
public NumberInput<_> Amount { get; private set; }
For this input in the SUT:
<input id="ember293-mask" class="form-control " type="text" style="text-align: right;" im-insert="true">
When I use Amount.Set(123.45) it works great in Chrome, but in Firefox, it is only entering the two digits after the decimal point (the .45). It does the same thing if I define the input as a TextInput and Set a string with a decimal point. But, if I do Amount.Type(“123.45”) it works great on all browsers. Any suggestions on how to work around this?
You can try to change the behavior of a field value setting. Mark the Amount property with either [ValueSetUsingCharByCharTyping] or [ValueSetUsingScript] attribute.
Related
I'm implementing a dialog for registering an address. In the street name field, I'm using PrimeFaces' <p:autoComplete> tag to help the user find the name of their street. The completeMethod works as expected, but to avoid confusion between similar street names I would like the drop-down list to also include the municipality the given street is in, for instance on the format "<street name>, <municipality name>".
I don't want the municipality name to be included in the actual field, so I've concluded that I need a method that performs some sort of string manipulation (substring using the position of the first comma, for instance), but I can't figure out where such a method would be called from. I've had a look through the PrimeFaces documentation, but I haven't been able to find anything that would allow me to do this. Is this at all possible in <p:autoComplete>? Alternatively, is there another autocomplete implementation which supports this, or would I have to implement my own javascript component?
EDIT: This is what the xhtml code I'm using looks like:
<div class="form-group row required">
<h:outputLabel value="#{msgs['#common.mailingAddress']}" for="address" styleClass="col-xs-12"/>
<p:autoComplete
id="address"
name="address"
size="50"
maxlength="50"
styleClass="col-xs-12 street-name"
label="#{msgs['#common.search']}"
disabled="#{not configurationController.cardCtrl.editable}"
value="#{configurationController.cardCtrl.selected.address}"
required="true"
completeMethod="#{configurationController.cardCtrl.autoCompleteTest}">
<f:validator binding="#{onlyLettersOrDigitsValidator}"/>
</p:autoComplete>
<h:message id="addressMessage" for="address" styleClass="inline-error inline-error-small"/>
</div>
The autoCompleteTest method in the controller is as follows:
public List autoCompleteTest(String input) {
AddressSearch addressSearch = AddressSearch.builder()
.streetName(input)
.municipality(municipality.getName())
.maxResultsPerPage(10)
.build();
return addressesToStreetNames(mapService.addressSearch(addressSearch).getAddresses());
}
With a helper method addressesToStreetNames which takes a list of Address objects and returns an ArrayList<String> containing those addresses' street names.
EDIT2: Based on suggestions in the comments, I tried setting itemValue and itemLabel to different values, to see if that had any effect. The new xhtml looks like the above, with the addition of the following three lines:
var="address"
itemValue="#{address.streetName}"
itemLabel="#{configurationController.cardCtrl.formatAddress(address.streetName, address.postTown)}"
The autoCompleteTest method now also returns the Address object directly rather than a String representation of the street name, so that these fields are available. The formatAddress method is simply return streetName + ', ' + postTown;
This causes the dropdown list to look how I want it to look, but when I click an item it still inserts the whole string with both street name and post town/municipality into the text field (and in fact, before I've written anything, the text field already contains ", ").
I need to create select field without float label but I want to have placeholder and default value.
I read docs https://material.angular.io/components/form-field/overview#floating-label and tried to do it by myself.
<mat-form-field [floatLabel]="never">
<mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
<mat-option *ngFor="let category of categories" [value]="category.name">
{{ category.name }}
</mat-option>
</mat-select>
<!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>
And anyway I get float label. That am I doing wrong?
The correct way is that:
<mat-form-field floatLabel="never">
Square brackets for variables.
Sergei R has the correct usage for basic inputs (input type=text) but for the dropdown (select), it simply doesn't work. Even the Angular Material docs (https://material.angular.io/components/form-field/overview#floating-label) have sample code that (when augmented for this specific scenario, floatLabel="never"), indicate that it doesn't work: https://angular-vij8al.stackblitz.io
I added the fourth example of how to get the placeholder effect without the label (but you lose the ability to use more complex text).
You can remove float label even on mat-select by putting the following into your global styles.scss:
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
If you want to apply this to only one mat-select, you can just specify it further in the above code.
I had given up when I saw the previous answers that said it simply can't be done, until I saw this answer for a different question about floatLabel: https://stackoverflow.com/a/66531080/14100714
Just Use this in scss:-
::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
I have ran into a particularly strange problem when implementing a RichFaces tool tip component. In my project I have a table that displays a list of Strings that are entered by the user, and I want there to be a pop-up of additional information when a user mouses over the strings in the list.
One of the requirements is that any string that is more than one word must contain double quotes "" when input by the user--e.g. a single word would be input as Java vs. a phrase "Java is cool".
So, I added a <rich:toolTip> to render additional info if it exists--and it works, except for strings that contain double-quotes. For example (as it's displayed in the table) "sample string" will not show additional information on mouseover.
My JSF code is simply:
<h:outputText id="keywordText" value="#{keywordData.keyword}"/>
<rich:toolTip for="keywordText" rendered="#{keywordData.comments != null}" value="#{keywordData.comments}"/>
Like I said, this works for words/strings that do not contain quotes. I am wondering if there is a workaround within JSF/RichFaces I can use in order to get this to work properly with a string that contains quotes. Or perhaps some assistance in writing a custom JavaScript function that forces or "tricks" RichFaces into handling quotation marks in a string correctly?
Thanks for any help in advance!
Edit: I am using RichFaces 3.3.3
In the page source, for the string "Testing Quotes" (does not work) I found this:
<span id="j_id138:j_id144:keywordTable:"Testing Quotes":keywordText">"Testing Quotes"</span>
<span id="j_id138:j_id144:keywordTable:"Testing Quotes":j_id159" class="rich-tool-tip " style="z-index:99; ">
<span id="j_id138:j_id144:keywordTable:"Testing Quotes":j_id159content">
<p>This comment should display</p>
</span>
<span id="j_id138:j_id144:keywordTable:"Testing Quotes":j_id159script" style="display:none">
<script id="scriptj_id138:j_id144:keywordTable:" quotes":j_id159"="" testing="" type="text/javascript">
new ToolTip("j_id138:j_id144:keywordTable:"Testing Quotes":j_id159","j_id138:j_id144:keywordTable:"Testing Quotes":keywordText",{'showEvent':'mouseover'} );
</script>
</span>
You can see that the quotations in the string itself (which appears to supposed to be part of the id attribute) are being misinterpreted in the new ToolTip parameters. And for a string testkeywordawesome without quotes you can see it works (because it does not contain quotes):
<span id="j_id138:j_id144:keywordTable:testkeywordawesome:keywordText">testkeywordawesome</span>
<span id="j_id138:j_id144:keywordTable:testkeywordawesome:j_id159" class="rich-tool-tip " style="z-index: 99; visibility: hidden; display: none; left: 63.7833px; top: 210.75px;">
<span id="j_id138:j_id144:keywordTable:testkeywordawesome:j_id159content">
<p>the best comment in the world</p>
</span>
<span id="j_id138:j_id144:keywordTable:testkeywordawesome:j_id159script" style="display:none">
<script id="scriptj_id138:j_id144:keywordTable:testkeywordawesome:j_id159" type="text/javascript">
new ToolTip("j_id138:j_id144:keywordTable:testkeywordawesome:j_id159","j_id138:j_id144:keywordTable:testkeywordawesome:keywordText",{'showEvent':'mouseover'} );
</script>
</span>
Edit2: The tool tips exists in a rich:column, of which exists in a rich:extendedDataTable. Below are their code:
<rich:extendedDataTable value="#{keywordEntry.globalKeywordsDataModel}"
rendered="#{fn:length(keywordEntry.globalKeywords) gt 0}"
styleClass="removeEDTSortIcon removeEDTContextMenu"
id="keywordTable" rowClasses="row1, row2"
var="keywordData" rows="0" noDataLabel=" "
headerClass="#{displayHeader == null or displayHeader ? 'rich-table-header' : 'hide'}"
rowKeyVar="keywordRowIdx" enableContextMenu="false"
sortMode="#{globalKeywordListSort.multiSortEnabled ? 'multi' : 'single'}"
sortPriority="#{globalKeywordListSort.sortOrderList}"
width="#{eStaffUser.userKeywordAdmin ? '750px' : '750px'}"
height="#{((fn:length(keywordEntry.globalKeywords)*30 + 50) lt 480) ? (fn:length(keywordEntry.globalKeywords)*30 + 50) : 480}px"
>
and
<rich:column id="#{globalKeywordSortFieldEnumBean.KEYWORD}" selfSorted="false" width="#{eStaffUser.userKeywordAdmin ? '48%' : '52%'}" sortBy="#{keywordData.keyword}"
sortOrder="#{globalKeywordListSort.dataTableColumnSortClass[globalKeywordSortFieldEnumBean.KEYWORD].sortOrder}">
id="j_id138:j_id144:keywordTable:"Testing Quotes":keywordText"
This means that one of the parents of <h:outputText id="keywordText"> has its id defined by something that evaluates to "Testing Quotes", that's obviously bad.
OK, so the root of the issue was that the rich:extendedDataTable uses an ID supplied by each entry to generate a unique ID for each table row. So the problem ended up being in the underlying "Model Managed-Bean" that implemented a generic data entity interface, this interface defines a getEntityId() method and in this case, the "ID" returned was the keyword value itself, since there was no true (i.e., database) entity ID such as a primary key:
public class KeywordDataBean implements SummaryDataEntityIF<String>
The problem was resolved by changing the interface's implementation to Integer and returning the hash as the unique ID for each keyword object:
public class KeywordDataBean implements SummaryDataEntityIF<Integer>
This forced the html id generated by the rich:extendedDataTable to be a simple integer number instead of a (keyword) string containing quotes, allowing the rich:toolTip to work properly.
Hi i have this method in managed bean.
public String instructionsText() {
String text = "Whether your web site needs a simple 'face lift' <br /> "+
" major 'reconstructive surgery,' the staff of"
return text;
}
in my jsf page :
<img src="http://icons.iconarchive.com/icons/aroche/delta/32/Help-icon.png" style="float:right" onclick="PF('dlgi').show();" alt="help" />
I want a line break in string text at the place of <br />.But i tried in different ways
(\n, \r\n, \r ,<br> , <br />).Nothing worked.Help would be greatly appreciated.Thank you.
There is a escape attribute for h:outputText, a Boolean flag which indicates whether to escape the HTML content or not.
By default the value is true. Set the value as escape="false".
You can find the Doc Ref HERE.
I have two input fields
input(ng-model='form.firstName', name='firstName', id='familyName')
and
input(ng-model='form.lastName', name='lastName')
I also have a textarea field
textarea(id='fieldInfo', ng-model='fieldInfo', name='fieldInfo' cols='15', rows='10')
I would like to change the text in the TextArea to "Please enter your first name" when the focus or cursor is in the First Name input and change it to "Please enter your last name" when the is on the last name inout and it should be able to toggle as the user switches focus from first name to last name and last name to first name.
Any assistance will be much appreciated.
Melroy
The ng-focus directive will not work for you if you are using one of the stable 1.0.x versions of AngularJS. However, I have created a working CodePen example of how you could do it without the ng-focus directive.
I created my own on-focus directive that evaluates an expression, which results in an update to the scope model being used by the textarea. I'm sure it could use some refinement, but the concept should still work for your application.
You can use the ngFocus directive if you are using angular 1.2.0.
In your controller:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.text = "";
}]);
And in your view:
<input type="text" data-ng-model="form.name" ng-focus="text = 'Please enter your first name'" />
<input type="text" data-ng-model="form.last" ng-focus="text = 'Please enter your last name'" />
<textarea name="area" id="textarea" cols="30" rows="10"> {{ text }} </textarea>
You can check this fiddle
Edit: Wrong fiddle link