We're using the component for a search field. When entering something into the field an "x" clear button appears. I can't figure out how to change the color of this button. We're not using an icon button or anything like that, and if I try to inspect the clear button it I can't find it in the dom, only the input field is shown selected.
I've understood that the normal approach to adding a clear button is to use inputAdornment. We are using inputAdornment for a progress indicator, but I can't find anything in our code for the clear button, so wondering if this is something default and how to go about changing it, or at least get a reference to it so I can use css to style it. Any help appreciated!
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 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
Does anyone know how to change the value "remove" which show after image upload. eg from remove to delete or an image icon.
Thank you in advance
Three ugly ways to do this:
You can do it with a Drupal JS behavior: change the value of the button or hide the remove button and create your own markup that fires the "remove" button with some event (click by default).
You can do this with CSS with background simulating text and a very high negative text, display block and overflow hidden and stuff like that.
I think you can do this with a hook_form_alter, if you can get the renderable array of the the form after the upload. You could try.
Hope that helps!
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.
I've created a Google like SearchBox control in Silverlight. That means, as I type in the box, a DropDownListBox appears just below the SearchBox, showing all the items that match with the text I've typed in searchbox so far (i.e AutoComplete feature), exactly like this:
Now, I want to add a functionality to it : I want to make the DropDownListBox to disappear, as soon as user clicks outside it, or anywhere on the screen. I cannot handle MouseLeftButtonDown (or any such event) in other controls, to accomplish this, because users can click anywhere, including non-silverlight region. Can anybody suggest me what should I do to achieve this?
So my question basically is:
How to know if user has just clicked and the click event occurred outside a particular control?
Please note that AutoCompleteBox doesn't serve my purpose. So I cannot use it.
I have a feeling that working with LostFocus event can solve your problem.
I guess this question is a bit old, but i just stumble upon trying to do the same and finding a solution. This is what i did
Created a Border with All Margins -500, this will cover the full screen essentially.
On Click Behaviour of this Border, the dropdown section of SearchBox
is collapsed.
Adjust z-Index of Border just below the SearchBox and DropDown
section, so clicking on SearchBox or DropDown wouldn't close it.
Set Border Visibility Collapsed, and make it visible when DropDown is Visible.
I hope it helps someone who is looking for the similar problem.