How to hide the next and prev button in the TablePagination component. Is it something that I have to do in css or configure the component in some way? At the same time I want to keep the exact position of the "Showing ... ".
There is no option to hide the next and back IconButton in TablePagination. So I'm afraid you have to rely on css.
If you want to remove the buttons completely, use display: none:
<TablePagination
{...props}
nextIconButtonProps={{ style: { display: "none" } }}
backIconButtonProps={{ style: { display: "none" } }}
/>
If you want to hide the buttons and reserve the space where the buttons occupy, use visbility: hidden:
<TablePagination
{...props}
nextIconButtonProps={{ style: { visibility: "hidden" } }}
backIconButtonProps={{ style: { visibility: "hidden" } }}
/>
Live Demo
Related
I would like to realize a dropdown, where the width of the dropdown button is not necessarily equal to the width of the dropdown list.
I know that we can use style={{ minWidth: '200px' }} to control the width of the dropdown button and dropdown list. Now, I would like to make the width of the dropdown list 500px.
I tried to set .fui-Listbox { width: 500px } in the stylesheet, but it did not work.
Does anyone know how to do that?
StackBlitz: https://stackblitz.com/edit/react-ts-cejuzs?file=App.tsx,style.css,index.html
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands,
} from '#fluentui/react-components';
import {
Dropdown,
Option,
DropdownProps,
} from '#fluentui/react-components/unstable';
import { TextField } from '#fluentui/react';
import * as React from 'react';
import './style.css';
export default class Grouped extends React.Component<{}, {}> {
land = ['Cat', 'Dog', 'Ferret', 'Hamster'];
render() {
return (
<FluentProvider
className="fluent-provider"
style={{ display: 'flex' }}
theme={webLightTheme}
>
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</FluentProvider>
);
}
}
Edit 1: Following pier farrugia's answer, I tried to use .fui-Listbox { width: 500px !important; }. It did make the width of the dropdown list 500px, however it impacted all the dropdowns in the project, which is not what I want. I tried to add classes and wrote selectors such as .drop-down .fui-Listbox { width: '500px' !important; } and .drop-down-2 .fui-Listbox { width: '100%' !important; }, but it did not work. I guess it's because under the mode of dropdown, .fui-Listbox is not a child class of drop-down-2 or .fluent-provider-2. Does anyone know how to properly write the selectors to limit the impact only to the dropdown I target?
https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx,style.css,index.html
in the code you have :
<Dropdown
className="drop-down"
style={{ width: '100px' }}
placeholder="Select an animal"
>
Your style 100px is generated dynamically.
Change in style even with !important is not working.
Modify the the line
style={{ width: '100px' }}
to
style={{ width: '500px' }}
To change only the width of the dropdown list, you have to use the style or the className tag for that specific dropdown slot (listbox):
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{style: {width: "500px"}}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
or if you want to keep using your stylesheet
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{className: "custom-dropdown-width"}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
and in your stylesheet
.custom-dropdown-width {
width: '500px' !important;
}
I am trying to apply the following styles to the ul that appears once the button is clicked:
&.MuiList-root {
padding-top: 0px;
padding-bottom: 0px;
}
Here is a live sandbox where problem is illustrated:
https://codesandbox.io/s/react-typescript-forked-tyd8n8?file=/src/App.tsx
According to the posted sandbox, the styles are attached to CustomMenuItem which is the list items. To target the list and remove the padding, consider to style the Menu instead, with the sx prop (or create a custom component with styled):
Forked live with modification: codesandbox
<Menu
{...bindMenu(popupState)}
sx={{
"& .MuiList-root": {
py: "0px",
},
}}
>
<CustomMenuItem
onClick={() => {
console.log("hello");
popupState.close();
}}
>
label
</CustomMenuItem>
</Menu>
I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.
Now, I would like to make the distance between Button 2 and the dropdown (e.g., Cat) smaller.
I guess we need to overwrite the left padding of the button inside the dropdown. I tried to put marginLeft: "-10px" and paddingLeft: "-10px" in the style of FluentProvider or Dropdown, but it did not work.
Could anyone help?
CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands
} from "#fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "#fluentui/react-components/unstable";
import { CommandBarButton } from "#fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "#fluentui/react/lib/Icons";
initializeIcons(/* optional base url */);
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const styles = useStyles();
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ flexBasis: "auto" }}>
<span style={{ lineHeight: "2.7rem" }}>Title</span>
</div>
<div style={{ display: "flex" }}>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Back" }}
ariaLabel="Back"
text="Button 1"
disabled={false}
checked={false}
/>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Up" }}
text="Button 2"
disabled={false}
checked={false}
/>
<FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex"
}}
defaultSelectedOptions={["Cat"]}
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
</Dropdown>
</FluentProvider>
</div>
</div>
);
};
There might be many approaches, perhaps try specify styles for Dropdown button in makeStyles and pass it to the button. The value in below example can be further adjusted to suit the use case.
Forked demo with modification: codesandbox
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
},
// 👇 styles for the dropdown button
button: {
paddingLeft: "0px"
}
});
Pass the styles to the button of Dropdown:
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex",
}}
defaultSelectedOptions={["Cat"]}
// 👇 pass styles to the button
button={{ className: styles.button }}
{...props}
>
...
You cant assign negative values to the padding. Try the same idea but on Button2, but with negative margin-right: -10px You then might need to move the whole navbar 10px to the right, since it wont stay aligned as it is now. You can fix it by doing the same on navbar content.
You might also try overriding padding with padding-left: 0 !important
I have a div with a button and another div in it. The button is normally hidden and the inner div has a bunch of graphs and text. In certain circumstances, I want to blur the inner div and have the button float on top in the middle of the blurred out section, kind of like you see on medium or news sites when asking for subscriptions (although I removed the logic for the example). The way I'm doing it is using absolute positioning for the button, but when I do that, all of the hover functionality just flat out isn't working on the button. It doesn't change the background color of the button or change the cursorI'm using material UI and react. Here is a code sample ->
const useStyles = makeStyles((theme) => ({
blur: {
filter: "blur(7px)",
},
relativePos: {
position: "relative",
},
absolutePos: {
position: "absolute",
top: "50%",
left: "50%",
},
floatingBtn: {
"&:hover": {
cursor: "pointer",
backgroundColor: "red",
},
},
});
// some other stuff
<div className={classes.relativePos}>
<Button
variant="contained"
color="primary"
className={`${classes.absolutePos} ${classes.floatingBtn}`}
>
Button Text
</Button>
<div className={classes.blur}>
{/* Blurred Inner Div Stuff */}
</div>
</div>
I'd love suggestions on either 1) how to get this implementation working OR 2) a better implementation NOT using absolute positioning, if there's a better, more modern approach.
There are two solutions:
use zIndex on the button that is greater than the blurred inner div
Move the button under your blurred inner div
I would prefer the 2nd approach as you don't need to know the zIndex of other elements
const useStyles = makeStyles((theme) => ({
blur: {
filter: "blur(7px)"
},
relativePos: {
position: "relative"
},
absolutePos: {
position: "absolute",
top: "50%",
left: "50%"
// zIndex: 1000 <- Add The zIndex here if you want 1st approach
},
floatingBtn: {
"&:hover": {
cursor: "pointer",
backgroundColor: "red"
}
},
// This is temp button to just toggle the absolute button
tempButton: { margin: "30px 0" }
}));
export default function App() {
const classes = useStyles();
const [showButton, setShowButton] = useState(false);
return (
<div className={classes.relativePos}>
{/* Your graphs area */}
<div className={classes.blur}>This is graphs area</div>
{/* Your absolute button with hover effect */}
{/* you can add it at the bottom and then no need to use zIndex */}
{showButton && (
<button className={`${classes.absolutePos} ${classes.floatingBtn}`}>
Button
</button>
)}
{/* Temp button to show/hide the absolute button, you should have ur own logic */}
<button
className={classes.tempButton}
onClick={() => setShowButton(!showButton)}
>
Click me to show/Hide the button
</button>
</div>
);
}
working example: codesandbox
BTW If you remove filter: "blur(7px)" from the blur class then the hover should work without changing anything in your code. I have no idea why (-_-)
I want to display such a field
But even when the field is in focus the border remains intact and is not cut by the label
I am using material-UI TextField
You want to:
hide the label (I am doing it when you enter a value just to show you - you can remove it altogether if you'd like)
complete the border i.e. remove the legend (CSS)
relevant CSS:
legend { border:1px solid red; display:none; }
relevant js:
const styles = theme => ({
cssLabel: {
color: "green"
},
cssLabelHide: {
display: "none"
},
});
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange("name")}
margin="normal"
variant="outlined"
InputLabelProps={{
classes: {
root:
this.state.labelVisibility === true
? classes.cssLabel
: classes.cssLabelHide,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
},
inputMode: "numeric"
}}
/>
working stackblitz here