I have a combo box in ext js , which is dynamically populated. Nothing very complex...and it populates correctly. This is the structure of the display values of the combo:
Name: [dynamicName]
Gender : [dynamicGender]
Age: [dynamicAge]
The objective is to have the Name:, Gender: and Age: inside <b></b> tag. The dynamic values should be in normal text.
Let's say I define an array from which i will populate the datastore of the combo. This is the array:
var arr=[[id1, <b>Name:</b>],[id2, <b>Gender:</b>],[id3, <b>Age:</b>]]
The thing is when i click the dropdown, in the list, they show up proper. As soon as the user selects an option, let's say Name...in the selected option, the formatting goes all wrong. By wrong I mean, the bolded text is not shown. Instead , the string literal <b>Name:</b> dynamicName is showed.
How can i use tpl syntax to solve this?
You can solve this with css. Here is one way:
In the config for the combo box, add:
itemCls: 'make-bold'
(or name this class whatever you want)
Then, in a style sheet, add (using the same name):
.make-bold input {
font-weight: bold;
}
This will style your input box (what's displayed after you've selected from the combo box) in bold.
While the option list is made of <div> elements, thus allowing for styling, the field itself is just an <input> element, and these do not support content styling.
So the answer is: no, you can't.
The extended answer is: I'm pretty sure someone did an alternate implementation of combobox component, that uses different HTML markup and allows for styled content in the field. Try asking on ExtJS forums.
I had a similar issue. I want to have a few selections in the combo list bold, but I don't want the HTML markup in the input when the value is selected:
1. Use a Template as this tutorial explains, see Using templates to change the look of combo box items.
Or
2.Use a Select Listner and Regex. You can put a listener on the "select" event and then simply use some regex to strip HTML tags like /<[^>]*>/g to remove HTML tags from input field. Now your HTML used to format the list won't affect the input.
Related
I'm using primeng tooltip, and I need to show the tooltip only when the input is invalid. I'm using following code but the tool tip is displayed on hover or on focus.
I have tried using tooltipDisabled and tooltipEvent.
<input type="url" name="url" class="form-control" pattern="(https|http)?://.+"
formControlName="url" [disabled]="flag2" pTooltip="Please enter URL in valid format"
tooltipPosition="left" tooltipEvent="focus">
Expected: Tooltip should be displayed only if input box is invalid
Actual: tooltip is displayed on hover or focus
So the short answer is: no, you can't.
The long answer is: you can show it programatically, but it will also still display through the only options made available by primeNg - onHover and/or onFocus - unless you remove those interactions from the element.
Displaying Tooltip programatically
What you can try and do is force the event that triggers the tooltip on the element on which you have it attached to. There are several ways that can be used to find an element, and that is not your question, but you can find your url input field for example by looking for it on the DOM through its name.
var element = document.getElementsByName("url")[0];
After whichever validation you have fails, you can use that variable to dispatch the event that triggers the tooltip.
element.dispatchEvent(new Event('mouseenter'));
When the element is valid you can make the tooltip disappear by also dispatching the appropriate event.
element.dispatchEvent(new Event('mouseleave'));
As I said above, this will not prevent it from appearing when you hover or focus your input, but it answers your question of how it can be done.
Workaround to prevent standard behaviour
In order to not have the tooltip appear whenever the Element is hovered or focused, I suggest that you actually attach it to another element alltogether. One that you can create and connect right next to your input field, or in it. The important thing is that it is not the field itself that you want to interact with. And then you can use CSS and add to the element with the tooltip no mouse events, for example through a class.
.noPointerEvents {
pointer-events: none;
}
This will ensure that the user won't activate the tooltip with the mouse. And it will only trigger through the previousl given code. You can also disable tabbing, if you selected one element that can be tabbed through.
There is a hack. But it is a hack and I would not recommend this. Since primeng doesn't expose any way to control the tooltip you have to do it by accessing the element manually. Following is one way to do this.
Add two classes to the tooltip using tooltipStyleClass, one class d-none which has display:none !important; property and other class random-class to access the element using jquery or javascript. Using jQuery we will access the element and remove class d-none when the input is invalid. This check has to be implemented in (focus) = 'onFocus()' function.
In the onFocus function remove the d-none class from the tooltip element if the input field is invalid. If the input field is valid then add the d-none class to the element
HTML
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipStyleClass="d-none random-class" tooltipEvent="focus" (focus)="onFocus()">
CSS
.d-none {
display: none !important;
}
Javascript/Component
onFocus() {
if (//input field invalid) {
setTimeout(() => {
$('.random-class').removeClass('d-none');
}, 100);
}
}
I cannot stress enough on the fact that this is a hack, I do not recommend this but it gets the job done. If you want to replicate this on other input fields then every field should have different random class name to access that specific element.
To check the validity of a form in my page, I test this property in my controller's scope:
$scope.formName.$valid
The problem is that when I add forms dynamically to the page (based on a model property), the $scope.newFormName property is not added to the scope.
This plnkr illustrate the problem
Click the 'Add form' button to add forms to the page
Click the 'Search forms' to update the list with the forms found in the $scope
Note that the added forms are not found in the scope
Is there any way to make this work? How can I check the validity of this dynamically added forms?
So your code adds a list of identical forms. And you want to see whether this list is valid or not.
The solution is to use ngForms within a parent form. See this Plunkr (my modified version of yours).
Form input values are bound to objects in the $scope.dynamicData array, which also is used by ngRepeat to create the list of forms.
Invalid fields are shown with a solid red border, and invalid forms have a dashed red border.
When forms are nested like this, the parent form is invalid when any of its child forms are invalid.
I'd use angular.element(). I would also personally get it via ID rather than name, but that is just me. View this plunker to see what I did: http://plnkr.co/edit/b87HJt
I'm using angular.element() to get the element by the name, getElementsByName and then using the $attr directive to get at the name.
When I add a label to a field in any form within my AngularJS app, it results in a behavior where clicking a field assigns focus to the field above, thus making it impossible to select a field.
The quick fix it to not use labels and just a different tag to replace labels, but it seems like an odd bug not being able to use labels for fields. Anyone else experience this lately?
Here is an Angular fiddle for solving this Angular riddle:
http://bit.ly/154zU1H
You messed up your close tags on the labels:
http://jsfiddle.net/ysQPt/
<label>Label 1<label>
<label>Label 1</label>
I have a select2 input box the defined like this:
<input id="searchbox" ui-select2="autoCompleteSearch" ng-model="searchedLeafs" style="width:80%;height:36px;" class="searchbox"/>
Basically, while the user can type text into the input box (and select from the suggested autocomplete list), i would also would like to enable the user to click on an angular-based button (on the same scope) which "inject" a tag into this input box (instead of the user typing it).
Does anyone can tell me how you can do it property in angularjs? i know how to do it in the old plain select2, but coulnd't find how can you manually/dynamically add items (key/value) to the list of tags.
if you want to get a simple example, lets say that instead of you typing the tags that you want to associate with stackoverflow question, you would simply click on a link/button which would add it to the list of tags yourself.
Thx
Simply push a new object into the ng-model's array and assuming it's duck-typed to the rest of the objects it should show up fine.
hello i'm having problems with the labels of checkboxes. when i use more than one model of the same class in a single view the checkboxes seem not to use the names from attributeLabels of that model.
i.e. if i have this in my view:
$form->checkBoxRow($colorArray['left'],'[left]special_request');
the checkbox get rendered with a label "[left]special request" instead of "Special Request" as stated in the attributeLabels of the Color model.
on the other hand dropdown lists, text field, etc are rendered correctly.
i have noticed this bug/feature after updating bootstrap from version 0.9.12.r211 to 1.0.0.r296.
The checkBoxRow and all methods ended with Row get the label from the array returned by Model->attributeLabels().
You can either change the autogenerated labels or use the TbLabel widget.
Choose the best for your issue.