I am trying to style the calendar icon (to be specific increase the font-size of the icon) inside material UI's keyboard datepicker text field in React.
<KeyboardDatePicker
keyboard={!this.props.isDisabled}
keyboardIconProps={{ fontSize: "35px" }}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
pickerRef={node => (this.picker = node)}
InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
onError={console.log}
value={this.props.storeValue}
onChange={this.onChangeCallback}
format={this.props.displayFormat}
onBlur={this.onBlurCallback}
disableOpenOnEnter
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
I tried setting the KeyboardButtonProps but it doesn't seem to set the style of the icon. I searched online and there are no solutions for my problem. Any help would be much appreciated. Cheers!
Assuming that you use KeyBoardDatePicker from #material-ui/pickers
You can change the icon via the keyboardIcon prop which expects a ReactNode as a child.
Basically just add the following prop to your component
keyboardIcon={<SomeReactElement/>}
Here you have a working sandbox
Related
I'm using Autocomplete with TextField for renderInput throughout my app for form field input, but have one case where I don't want to allow any text input and only permit the selection of one of the dropdown elements.
If I switch to the more natural Select component, however, the styling of the dropdown elements is different. In particular, the width of the options doesn't seem to be inherited from the FormControl element.
If I use Autocomplete and use dev tools in the browser to set the disabled property of the input element, everything behaves as I would like. But if I pass inputProps={{disabled: true}} to TextField, things blow up when I click the dropdown.
Any suggestions?
You should rewrite readOnly attribute of a native input element to true via inputProps of renderInput to achieve the desired result:
<Autocomplete
renderInput={({ inputProps, ...rest }) => <TextField
{...rest}
inputProps={{ ...inputProps, readOnly: true }}
/>
Demo
I am using latest material-ui/pickers v4-alpha7.
Is is possible to show action buttons for the DateRangePicker. I know that they are shown by default for MobileDateRangePicker but can not find the solution for the regular DateRangePicker.
function BasicDateRangePicker() {
const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
return (
<DateRangePicker
startText="Check-in"
endText="Check-out"
value={selectedDate}
onChange={date => handleDateChange(date)}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} />
</>
)}
/>
);
}
Br, Igor
From their current docs:
Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices. The default DateRangePicker component is responsive, which means that Mobile or Desktop mode will be rendered according to device viewport.
You can either use the DateRangePicker - which will be responsive, or decide that you prefer to force specific behaviour by using MobileDateRangePicker or DesktopDateRangePicker.
Source: https://mui.com/components/date-range-picker/#responsiveness
There is no prop that you can pass to the DateRangePicker to force using the mobile version in order to show the buttons (you can just use the MobileDateRangePicker if you need it to work this way).
I've used react-select in ExpansionPanel(a component of material-ui) , it has made ExpansionPanel an unwanted scroll. how can I fix it? I tried to change z-index , but didn't work. consider third select in picture, it's drop down been hidden by ExpansionPanel. thank you in advance.
<Select
value={state.selectedPerson}
onChange={handleMitarbeiterChange}
options={state.peopleOptions}
textFieldProps={{
label: 'Mitarbeiter',
id: "mitarbeiter-required",
InputLabelProps: {
shrink: true,
},
}}
/>
I searched in many resources and tried many ways (such as z-index, overflow, position, ...), non of them worked . finally I found the answer on this link :
enter link description here
and this is the answer that worked for me:
If you are using v2 of react-select, you can use the menuPortalTarget prop to render the dropdown into a parent container (e.g. body) of the footer.
<Select
{ ... }
menuPortalTarget={document.querySelector('body')}
/>
Add these bold line in your all Select tag
<Select ......
1. menuPortalTarget={document.body} 2. styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
...... />
After seeing the half dozen related issues, yet not finding a resolution, I have found one.
<Select
menuPortalTarget={document.body}
menuPosition={'fixed'}
/>
Add these two options to your Select component.
It appears to make us of the new React Portal feature.
EDIT: If you do the above, you then run into this problem with the menu anchoring to the page. https://github.com/JedWatson/react-select/issues/4088
Not able to assign custom class to tooltip component in order to update the style of tooltip component
Tried by assigning to classes property
Posted at https://codesandbox.io/s/twilight-fire-907mp
Make your own Tooltip with custom styles and then use it:
const TooltipWithBiggerFontSize = withStyles({
tooltip: {
fontSize: 30
}
})(Tooltip)
As you already did with other components, eg: DialogContent or DialogActions.
Usage
<TooltipWithBiggerFontSize title="Custom Search">
<Publish />
</TooltipWithBiggerFontSize>
BTW, your code is confusing. You are mixing functional and class components. Once, you are styling with withStyles once with makeStyles.
You should choose one method and stick to it. Here is styling docs. It will solve most of your problems.
codesandbox
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.