In my project, I am using Redux Form. I have Grammarly Chrome extension. There is textarea Field in my Form. When I Click on Textarea field the textarea field disappears and it appears on the side. If I change textarea field to text its working fine but I need textarea here. I post the screenshot for a better understanding of the problem. There is any way to overcome this problem.
Before clicking on textarea, the textarea display normally.
After Clicking on textarea, the textarea box appears on right side of the other fields.
Grammarly extension set inline styles for the textarea/contenteditable fields.
You need just check which styles are overwritten by extension and then just fix them by applying your styles.
Also, you can disable initialization of Grammarly extension by special attribute: data-enable-grammarly="false."
You can find more information here.
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'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.
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 think this code is having some problem. Because when I click on a tag to remove it, the click event will propagate to host div which results in focusing the input box.
Is there a way or any attribute that will prevent the input box from getting focused on removing a tag?
I need a search field component but i don't find such a component or a imeoption for text field to make it as search field. i search a lot but still nothing founded.
is there any way to do that?
Thanks in advance.
What do you mean by "search field"?
There is a DataChangeListener that allows you to track fine grained changes to the TextField. You can set a hint & hint icon to show that this is a search field. Its unclear what you are missing.
Edit based on comments:
To get the magnifying glass icon instead of Done button on Android you can use the somewhat undocumented flag:
textCmp.putClientProperty("searchField", Boolean.TRUE);
This is a done event, so you can distinguish pressing this from pressing outside of the field by using the done listener callback on the text component.