Using react-bootstrap-typeahead is it possible to change the contents of the Clear button?
I need to include a FontAwesome icon and "CLEAR" text to match a design.
Looking at the [RBT] Custom Aux Components demo I can see the ClearButton component, but I can't see how to customize this. I tried changing the label prop but this had no effect:
<ClearButton onClick={onClear} label="CLEAR" />
Is it possible to add:
label text
a FontAwesome icon
to the Clear button?
You can't customize ClearButton itself, but you can follow the example you linked to and use your own clear/close button component:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyCloseButton onClick={onClear} />}
</div>
)}
</Typeahead>
Note that ClearButton isn't really anything special; it just encapsulates the markup and classnames for Bootstrap's Close Button into a component. Feel free to use your own button!
Related
I'm using react and I have a table with a Delete action column. I'm displaying a delete button in each row and want to have alt text for the entire button but I'm not sure how to do this since does not come with an alt option. I tried the below code but it doesn't work. I know I'm not doing it correctly so I wanted some guidance.
Also, I'm using the iconify library for my icon.
const DelButton = () => {
return (
<Link to="/someLink">
<button aria-label="Delete" title="Delete">
<Icon icon="gg:trash-empty" alt="Delete"/>
</button>
</Link>
)
}
Using aria-label on the button element should be sufficient.
You should remove the alt attribute from your Icon element. If it doesn't render to an img element, then it's not valid HTML anyway.
aria-label not only takes precedence over the title attribute in the accessible name computation, but it also enjoys quite a bit better browser support.
Whenever making a simple category filter which should include images, I keep getting a bug. When I console log, it turns out with the button my img is being clicked and being fired as an image, but when clicked around the edges the button is being fired and doing what I want it to do.
I can't have users experiencing this bug, please help.
My code:
...
<Fab
key={id}
variant="extended"
size="medium"
color="info"
aria-label="add"
value={id}
onClick={(e) => handleChange(e.target.value)}
>
<Avatar alt={name} src={icon} />
</Fab>
...
Is there a better way to design this ui? Or is there something I'm missing?
Perhaps you are having issues that the image is capturing the events. I'd suggest you test something on CSS.
1 - Create a class avatar in your CSS file.
.avatar {
pointer-events: none;
}
2 - Add this class to your component.
<Avatar className="avatar" ...
When you set that CSS pointer-events to none it means the Avatar component won't register it and it will let the events pass through.
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
I'm working on a site that was built using ASP.NET MVC and Kendo UI. I'm trying to add a custom icon to a button that is displayed within the Kendo UI grid but I'm stuck.
Here's the code in the grid to set up the button:
command.Custom("copy")
.Text(" ")
.Click("copyNAddEvent")
.HtmlAttributes(new { #class = "copy", title = "Copy this event" });
Here's the CSS for that button:
.k-grid .k-button.copy{
min-width: 40px;
}
And here's the class in the FontAwesome CSS (which is included in the project) that I need:
fa fa-files-o
I'm not great with CSS, and it looks like when you use the Kendo classes, it creates a span with their icon in it. I like the FA icon better anyway, hoping someone can point me in the right direction.
Looks like you are using the MVC wrappers. In that case, what I do is use a column template.
The client template contains the relevant code - an anchor tag with bootstrap buttons and an <i/> for the fontawesome icon. I could add text like "Edit" to the right of this if desired.
Note that this is an edit button on a kendo grid so I include the class k-grid-edit on the anchor so that kendo will perform the edit action. There are other classes for the standard grid actions like k-grid-add, k-grid-delete, k-grid-excel, etc. For something custom you can use your own selector or add onclick to the anchor and remove the unneeded k-grid-edit.
.Columns(column =>
{
column.Template(t => { }).Title("Edit").Width(10)
.HtmlAttributes(new { style = "text-align: center;" })
.HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" })
.ClientTemplate(#"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");
With this technique you will not see the Kendo default icons - just the fa.
You can set it by using the font awesome unicode provided for that icon and putting it in the after psuedo element, just like how font awesome puts their icons on elements. You can find the unicode when looking at the icon details. Here is the fa-files-o one: http://fontawesome.io/icon/files-o/
.k-grid .k-button.copy:after {
content: '\f0c5'
font-family: FontAwesome;
}
I agree with the answer above, just be sure you have the font awesome css file included in your markup.
I'm using <input type="file" /> in my webpage. I've different CSS classes for button and other controls. But I'm not able to add any class, style to browse button that appears due to above tag.
Is there any way to change its default appearance?
Thanks is advance.
You can't do that. You could only apply style to the entire <input />.
You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover.
Keep in mind that height: property will not work on Firefox 3.6; You could use font-size: to enlarge the height instead.
I have an example made: http://timc.idv.tw/html5-file-upload/ ; inspect the CSS of the 2nd demo.
You can't style the file input directly, but you can indeed give it some faux styling and/or make it invisible but still clickable. There's an article on how to do so at Quirksmode.
The <input type="file" /> control is notoriously difficult to style.
Here are some articles that can help.
There are also some nice libraries for styling hard-to-skin form elements. Uniform is nice for selects and upload fields.
You can't style a file input button with CSS. This is not the only element that you can not style. Some other inputs are not accepting styles. Look at this fiddle to see many types of inputs. Based on your browser some inputs renders different. Inputs like range input or date inputs are using OS level UI that is not editable by CSS.
What you can do is hiding the file input and showing another element like a div or another input that is accepting styling like button type input as your file input and trigger trigger click and submit (hitting enter) events on your hided actual file input.
Code example:
HTML
<input type="file" />
<label>Select file to upload: <input type="button" /></label>
CSS
input[type="file"]{visibility:hidden; width:0;}
JavaScript:
var fileInput = document.querySelectorAll('input[type="file"]')[0],
fakeFileInput = document.querySelectorAll('label')[0],
clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
fakeFileInput.addEventListener('click', function(event){
fileInput.dispatchEvent(clickEvent);
}, false);
Look at fiddle in action
So answer of you question is: No, unfortionantly you can not style file input BUTTON!