I'm using angular x-editable in my project for an editable popover. I've successfully made changes to the look of my confirmation button to an .svg I wanted to use and removed the Cancel button doing:
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'default';
editableThemes[default].cancelTpl = '';
editableThemes[default].submitTpl = '<img class="popoverSubmitBtn"
src="images/confirmationBtn.svg" ng-click="$form.$submit()">';
});
However I am having issues when trying to change editableThemes[default].inputTpl. It seems like changes to inputTpl are not being registered for some reason. What I would like is for the input box that shows in the popover to have a circular 'x' button to clear the current input WITHIN the input text field.
This was actually default behavior in the original x-editable (see here at Twitter typeahead.js demo). While there is an equivalent to use editableOptions.displayClearButton=true, this creates an entire button next to the input box, much like the confirmation button, which is not what I want.
My plan was to use a directive here that provides the 'clear' button and use editableThemes[default].inputTpl = '<input type="text" reset-directive>'; but again, seems like its broken. Even this open issue here leads me to believe it was never working as intended.
Has anyone had any luck with this or knows of any workarounds that may help in my situation?
ALSO- a bit unrelated but on the topic of styling, how do I move the position of where the popover shows up? Currently it's smack-dab in the middle of where my cursor is when I click the text to activate popover, but I would like it a bit higher and to the right.
Got it working. For those with similar issues:
Styling for the popover can be controlled through xeditable.css found in the bower_components directory after installation
While inputTpl isn't functioning the way I expected, I added the
custom directive to the input field using e-* (i.e. e-my-directive) with no issues.
Related
I am implementing edit feature with react now. The problem is that I haven't found the good solution for this yet.
I want to make a view like below.
Both title and description text area are already written with default text.
This text is not placeholder.
If user click the button, User can edit the text.
I tried the below two packages but it is not perfect for my purpose.
TextareaAutosize
import TextareaAutosize from 'react-autosize-textarea';
TextareaAutosize has a value attribute. but if I use this, I can't edit the text in it. And the defaultValue seems not working.
Do you know how to put a default text value into TextareaAutosize component?
2.AvInput
import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio } from 'availity-reactstrap-validation';
I think this is another good solution but the submit button seems not to be customized.
I should place the Edit button in the right-upper side of view.
But if I use this package, The submit button is placed at the bottom and it seems like it should be used tag.
Do you know how to connect my own submit button with AvInput?
The button is in other tags, not in its .
https://availity.github.io/availity-reactstrap-validation/components/avform/
<FormGroup>
<Button>Submit</Button>
</FormGroup>
other solution
If you have a better solution or experience, plz let me know.
Thank you in advance
I referred to the below answer and changed UX.
Submit form using a button outside the <form> tag
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
submit button seems to be included in the form tag.
I am trying to use Angular UI's ui.bootstrap.dropdown directive where I am facing a problem. After I cilck on the caret of the dropdown and then click on anywhere in the body, then if I try to click on a text field the text field immediately looses focus and the focus goes back to the caret of the dropdown button. I am however unable to produce this behavior in a plunker. But this behavior can be produced in the Angular UI demo page. To produce this behavior -
goto https://angular-ui.github.io/bootstrap/#/dropdown
click on one of the caret button to bring up the menu
click anywhere on the body to dismiss the menu
scroll up to datepicker popup demo section
try to place cursor in one of the text field
the text field will immediately loose focus and the page will scroll down to the dropdown button caret which was initially clicked.
I am unsure on how to stop this from happening. Any help would be highly appreciated.
Update
It seems this behavior only exists in version 2.3.1. If I use 2.3.0 this doesn't happen. Here is a plunker which produces the same behavior - http://plnkr.co/edit/c4EGyxQD1vbksFWjnIGb
Update
This is a bug in version 2.3.1 and has been raised in AngularUI Github.
Links to the issues given for reference -
https://github.com/angular-ui/bootstrap/issues/6364
https://github.com/angular-ui/bootstrap/issues/6372
This bug has been fixed in version 2.3.2
I got a problem with checkbox field using Adobe Indesign.
I want an image to become my checkbox button and also change the image after clicking. Unfortunately, after clicking on this button the image changes properly, but it also adds checker (check sign) in the middle of the picture. Can't see to overcome this.
It looks like this:
checkmarks
I would consider using two buttons for that. One hiding the opposite and vice-versa. Here is an example:
And here is a link to the package :
http://www.filedropper.com/dossieronoff
And here is a link to a demo PDF:
http://www.filedropper.com/onoff
I am using angularui bootstrap typeahead module for my project.
I am unable to pre-populate the drop-down with predefined value.
Whenever user click on input text of typeahead, it should automatically show the typeahead suggestion dropdown(from a static JSON).
Whenever user starts typing, then the behaviour should be normal.
I tried this solution but unfortunately it stopped working when I upgraded my angularjs to version 1.3
So I essentially accomplished this by making a custom directive and making a minor modification to the ui bootstrap typeahead code. You have to trick the typeahead into thinking someone has typed something in it. I placed a little pulldown arrow to the right of the field so essentially it looked like a pulldown and clicking on that arrow would show ALL choices. You should be able to do it using onfocus.
Basically find the code in the bootstrap typeahead that binds to the key events and I changed it to check for a keydown event of 40
if(scope.matches.length === 0 && evt.which === 40) { // Added
// COMMENT OUT modelCtrl.$setViewValue(modelCtrl.$viewValue);
modelCtrl.$setViewValue(''); // Added
}
You'll also need to make sure the typeaheadMinLength is set to 0. Note in the code above it checks for the case of the user NOT having typed anything AND the special keydown event that I trigger. You should be able to change this to trigger on onfocus. I copied the bootstrap typeahead to mytypeahead.js and then modified it as above, along with a few other minor mods that you may or may not need depending on if the field is "required" or not.
I have an input box and Its bound with datepicker. In my view, there is small calendar icon besides this input box. I want to trigger click event of an input box when user clicks on this calendar icon. I have done this using directive which I have applied to calendar icon. But its almost like jQuery. So is there any different way to achieve this? If my approach is wrong then please guide me to the right direction. I am new to angular and I have read some articles where I read that avoid use of jQuery. Thanks
My Directive
myApp.directive('openCal',function($compile,$filter) {
return {
link:function(scope,element,attrs) {
element.bind("click",function() {
element.siblings("input").trigger("click");
});
}
};
});
Its working fine. But I am not sure that is it right approach or not??
No, if I understand what you are trying to do you are over-complicating things a bit.
In your case it looks like you would have something like:
<img open-cal/>
<input ng-click="doSomething()">
Where click on the img triggers a click on the input, via the openCal directive. Instead considering doing something like this:
<div ng-click="doSomething()">
<img>
<input>
</div>
If doSomething() needs to get data from the input, use ng-model to bind data from your input to your scope.
ALTHOUGH!
If you ever need to do a directive, that is the right way to do it. Using element.bind is not a problem since that is included in Angular. What you want to avoid is using stuff like $('.calendar').click and such.
Another way to approach this would be to add a <label> element for your input field that contains the calendar. Then clicking the calendar would focus the input field. Then all you'd have to do is listen for the focus event on your input field to do your extra work. This has the added bonus of working if someone navigates to your input field via the keyboard by hitting the tab key.