I use the example autocomplete field from the Material-UI lib documentation. (https://material-ui.com/demos/autocomplete/#react-select)
There is a problem with fliping the menu when it opens at the bottom of the page or the browser's viewport.
Is there a way to fix this problem with Material-UI and react-select?
Or do I need to write something custom?
If you are not using a <Menu/> custom component, you can use the menuPlacement="auto" prop of <Select/>, then your problem is solved.
const components = {
Control,
// Menu , <-- delete it
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer
};
https://github.com/JedWatson/react-select/issues/403
Otherwise you can choose another selector, material-ui provides 2 more differents integration with the <Popper/> component: react-autosuggest and downshift.
https://material-ui.com/demos/autocomplete/
Hope it helps!
i've faced the same problem, for <Select /> component i have used what TomLgls suggest, but for <AsyncSelect /> as a work-around, i used some offset calculations in my component :
const rootHeight = document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom= selectElement.offsetHeight + selectElement.offsetTop;
...
<AsyncSelect
{...listProps}
menuPlacement={
rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top' // react-select menu height is 200px in my case
}
/>
i hope it helps as well
If you have created customMenu component then in that give className as open-menu-top and write this code for class:
.menu-open-top {
top: auto;
bottom: 100%;
}
Your CustomMenu maybe look like this:
const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => {
return (
<div
ref={innerRef}
{...innerProps}
className={`rs-menu ${customMenuClass} open-menu-top`}
>
{Your Logic}
</div>
);
};
Related
currently have been facing this issue using tailwind and making rehusable react components where you can pass as a prop some styles as tailwind classes. The actual problem is with the "pb-{number}" propierty. I can pass it this way and will work fine. This also happens with "border-{number}" property, but someway it accepts border-2 and border-4 (only these).
import './button.css'
export default function Button({
color = "orange",
inset = "pb-3", <--- this will work
border = "border-8",
className,
onClick,
link
, ...props}){
return (
<div onClick={onClick}
className={`btn-${color} ${border}
${className} ${inset}`}> <--- this will work
<div>
{props.children}
</div>
</div>
But if I try to make it cleaner so a person who don't use tailwind only has to pass a value (like the example below) it wont work.
import './button.css'
export default function Button({
color = "orange",
inset = "1", <--- this
border = "4",
className,
onClick,
link
, ...props}){
return (
<div onClick={onClick}
className={`btn-${color} border-${border}
${className} pb-${inset}`}> <--- this wont work
<div>
{props.children}
</div>
</div>
)
}
Sincerely I have no idea why is this happening. Hope someone with more experience can clarify my doubt.
Thanks in advance.
In tailwind you can't use dynamic class naming like bg-${color}, though we can mock it to be that, but it is not preferred. Because Tailwind compiles its CSS, it looks up over all of your code and checks if a class name matches.
For your approach you can try this.
const Button = () => {
const color = "red-500";
const inset = "3";
const border = "border-8";
return <div className={`bg-${color} ${border} pb-${inset}`}>Hello</div>;
};
export default Button;
Output with proper padding is applied
But try avoiding this workaround, as it is not recommended by the Tailwind CSS.
I'm trying to build a navbar, using React and hooks, where each div will change to a specific color on an onMouseEnter and onMouseLeave. I can't figure out why they're all affected if i hover over one. I guess I'm asking how I could make them independent of one another.
Sorry if this is a really obvious mistake. Still really green. Thanks again!
Here is a link to the CodeSandbox: https://codesandbox.io/s/holy-snowflake-twojb?file=/src/navbar.js
I refactored your code.
You can check it in https://codesandbox.io/s/lucid-lake-u3oox?file=/src/navbar.js
You are using the function setBackground to set the background color in the hoverStyle CSS class which affects to all <div className="hoverStyle"> tags.
There are many options to do that. If you want to do it with React, one way of do it is creating a CSS class like this:
.active {
background-color: #ffac4e;
}
then, create a functional component
const Activable = ({ className, children, bgColor}) => {
const [active, setActive] = useState('#fff');
return (
<div className={`${ className } ${ active }`
onMouseEnter = {() => setActive( bgColor )}
onMouseLeave = {() => setActive('#fff')}
>
{ children }
</div>
)
}
then replace your ` with this new component like this:
<Activable className="hoverStyle" bgColor="#ffac4e">
<div style = {navChildLeft}>2020</div>
<div style = {navChildTop}>
Shy RL <br />
Digital - Album art
</div>
</Activable>
and repeat with the rest of <div>'s
With react, it is important to think about reusable components. How can you create something that you can reuse over and over again in different parts of your project.
Take a look at this sample of your project broken into components.
https://codesandbox.io/s/holy-brook-3jror?fontsize=14&hidenavigation=1&theme=dark
I would recommend reading this to help out: https://reactjs.org/docs/thinking-in-react.html
I am using ag-grid in react, and I want to change the direction to RTL, also use of local text. Based on the ag-grid documentation enableRtl={true} would change the style of the grid. It is true when we set it permanently, but when I want to change it programmatically, it does not change. I passed the variable through props to the component for changing the direction and translating the text. This is my code
const Grid= ({dir}) =>{
return (
<div
className="ag-theme-balham"
style={{ height: '100%', width: '100%' }}
>
<AgGridReact
defaultColDef={defaultColDef}
columnDefs={column}
rowData={rowData}
enableRtl={dir === 'rtl'}
localeTextFunc={(key, defaultValue) => {
return dir === 'rtl' ? gridLocal[key] : defaultValue;
}}
/>
</div>
);
}
before changing direction
after changing direction
As it should be
I searched for the solution, but I cannot find a way to solve it.
What should I do? What is wrong with my code?
Edit: where I used the Grid component
const MainLayout = (props) => {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = useState(false);
const handleDrawerOpen = () => { setOpen(true) };
const handleDrawerClose = () => { setOpen(false) };
return (
<div >
<Topbar
setLang={props.setLang}
drawerOpen={handleDrawerOpen}
drawerClose={handleDrawerClose}
status={open}
handleSignOut={props.handleSignOut}
/>
<div style={{height:'48px'}}/>
<div className={classes.content}>
<Sidebar open={open} drawerClose={handleDrawerClose}/>
<Grid dir={theme.direction}/>
</div>
</div>
);
}
I have the same issue. After searching many times, I found only one solution.
I used angular not react, but, I can tell you the steps I used to solve this problem.
I followed the following steps:
I stored the value of the direction in the localstorage
Created a button to trigger an event that will change the value of the direction.
Get the value of the direction from the localstorage in the constructor
Inside the trigger, I changed the value on the localstorage for each click event.
finally, at each click event refresh the page with window.location.reload() to see the effect.
I know. It is not the perfect solution, but this is the only solution that worked for me. I think this problem is not found in the enterprise version of ag-grid.
Update:
I found a better solution. I use angular not React.
In angular, I used <ng-template> as follow:
<ng-template [ngIf]="AgGridDir === 'rtl'" [ngIfElse]="LeftGrid" #Withbutton>
<ag-grid-angular style="width: 100%; height: 450px;"
[class]="Table_Color_mode===Constants.light || Theme_dir===Constants.light?'ag-theme-alpine':'ag-theme-alpine-dark'"
[rowData]="ItemsMainCategories | async" [columnDefs]="columnDefs" (gridReady)="OnGridReady($event)"
[defaultColDef]="defaultColDef" [overlayLoadingTemplate]="overlayLoadingTemplate" [animateRows]="true"
[enableRtl]="true" [frameworkComponents]="agFrameworks" rowSelection="single"
(rowEditingStarted)="onRowEditingStarted($event)" (cellValueChanged)="UpdateItemMainCat($event)">
</ag-grid-angular>
</ng-template>
<ng-template #LeftGrid>
<ag-grid-angular style="width: 100%; height: 450px;"
[class]="Table_Color_mode===Constants.light || Theme_dir===Constants.light?'ag-theme-alpine':'ag-theme-alpine-dark'"
[rowData]="ItemsMainCategories | async" [columnDefs]="columnDefs" (gridReady)="OnGridReady($event)"
[defaultColDef]="defaultColDef" [overlayLoadingTemplate]="overlayLoadingTemplate" [animateRows]="true"
[enableRtl]="false" [frameworkComponents]="agFrameworks" rowSelection="single"
(rowEditingStarted)="onRowEditingStarted($event)" (cellValueChanged)="UpdateItemMainCat($event)">
</ag-grid-angular>
</ng-template>
<ng-template> is a tag created by Angular framework that can be used to render some components or HTML tags based on a condition.
As you can see, I used the same Ag-grid table with the same parameters. Each one with an ng-template. I used a variable called AgGridDir which is dynamically changed to rtl to ltr based on the user choice.
If the user chooses 'rtl' the first template is rendered and the [enableRtl]="true" is set to true, and if the user chooses 'ltr', then the second template will be rendered dynamically without reloading the page and the [enableRtl]="false".
I don't know about react much details, but, I want to share the idea.
I want to apply style to scrollbar, scrollbar style works perfectly in chrome using css. but does not work in Firefox and Iexplore.
Hence I opted to perfect-scroll-bar, But scrollbar does not move as expected if we navigate options using arrow keys, scroll position does not change.
Below is the demo link:
https://codesandbox.io/s/18pvjy0olj
Thanks in advance!
Basically you need to use MenuList component and wrap children with perfect scroll bar :
function MenuList(props) {
return (
<div className={props.selectProps.classes.menuList}>
<PerfectScrollbar>{props.children}</PerfectScrollbar>
</div>
);
}
Also, don't forget to setup a height property to parent container :
menuList: {
height:300
}
And update components object
const components = {
Control,
Menu,
MenuList, // here
MultiValue,
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer
};
I made an update on your example : https://codesandbox.io/s/n5pmxp57n0
You need to set Scrollbar into MenuProps something like...
import { InputLabel, MenuItem, FormControl as MuiFormControl, Select as MuiSelect } from "#material-ui/core";
import PerfectScrollbar from "react-perfect-scrollbar";
import "../vendor/perfect-scrollbar.css";
import { spacing } from "#material-ui/system";
const Scrollbar = styled(PerfectScrollbar)`
height: 300px;
`;
const FormControlSpacing = styled(MuiFormControl)(spacing);
const FormControl = styled(FormControlSpacing)`
min-width: 200px;
`;
const Select = styled(MuiSelect)(spacing);
const MenuProps = {
MenuListProps: {
component: Scrollbar,
},
};
return (
<React.Fragment>
<FormControl variant="outlined" m={3}>
<InputLabel id="select-label" shrink>SELECT LIST</InputLabel>
<Select
...
MenuProps={MenuProps}
>
{selectList.map((item) => (
<MenuItem key={item.value} value={item.value}>{item.text}</MenuItem>
))}
</Select>
</FormControl
</React.Fragment>
)
Just an improvement to #Alexandre answer for automatic height when scrolling is not needed.
Example: when the users start typing in select and options are reduced to one or two only
Instead of 7 for comparing props.children.length, just use the total number of options that are visible when the scrollbar is visible.
function MenuList(props) {
return (
<div style={{height: props.children.length >= 7 ? 300 : "unset"}}>
<PerfectScrollbar>{props.children}</PerfectScrollbar>
</div>
);
}
I have ToggleRefinement checkboxes in my project and was trying to style it using ".ais-ToggleRefinement-checkbox {}" but the only thing that seems to be able to change is the font-size to make the checkbox bigger. Color and background-color doesn't do anything. I'd like to change the colors (especially the color when the checkbox is checked) and possibly other styling of the checkbox since I'm using BlueprintJS custom checkboxes in other parts of my website and I'd like the styling to be consistent between them.
Is there any way to achieve this?
To use the BlueprintJS components, you can use a connector. The docs for that are here and a guide for connectors in general here. This would look slightly like this:
import React from "react";
import { Checkbox } from "#blueprintjs/core";
import { connectToggleRefinement } from "react-instantsearch/connectors";
const Toggle = ({ refine, currentRefinement, label }) => (
<Checkbox
checked={currentRefinement}
label={label}
onChange={() => refine(!currentRefinement)}
/>
);
const ToggleRefinement = connectToggleRefinement(Toggle);
const App = () => (
<InstantSearch>
{/* add the rest of the app */}
<ToggleRefinement
attribute="materials"
value="Made with solid pine"
label="Solid Pine"
/>
</InstantSearch>
);