Is there a way to create a Box or a Paper with a title on top like this screenshot :
I'm talking about the top lefty title portion. I tried using a Box or a Paper component but it doesn't seem like the option is there.
Thank you for the help
You can change a Box's underlying element to a fieldset and add a legend element as a child of the MUI Box, but you'll probably want to apply a little styling to it as MUI does not offer styled versions of fieldset/legend.
import React from "react";
import Box from "#mui/material/Box";
const FieldsetExample = () => {
return (
<Box component="fieldset">
<legend>Jean-François H</legend>
Box content goes here.
</Box>
);
}
Renders:
Working CodeSandbox:
https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js
Documentation References:
MUI Docs - Box API props (see component)
MDN Docs - <fieldset>: The Field Set element
Related
I am using #tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is supposed to.
For example, when there is very little content on the right and there is no scroll bar tippy tool is positioned properly as shown in the image below:
But whenever there is more content than the screen height on the right and scroll bar appears tippy tool seems to be positioned wrong (A bit above than the button) as shown in image:
I checked multiple ways to figure / fix this but wasn't able to
The code I'm using is this for the button tippy tool is this:
import React from "react";
import Tippy from "#tippyjs/react";
const TippyReload = props => {
return (
<Tippy
animation="fade"
theme="custom"
content="Refresh Count"
placement="top"
arrow={true}
className={`custom-tippy`}>
{/* Wrap this component over the refresh icon, so this will be the refresh icon */}
{props.children}
</Tippy>
);
};
export default TippyReload ;
Whenever I add a tooltip to an SVG (using react-toolip), the tooltip shows twice:
The Code:
<HelpIcon data-tip='This field represents all sales (or revenues) generated by the company.'></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true}/>
While using the HelpIcon from #mui:
import HelpIcon from '#mui/icons-material/Help';
import ReactTooltip from 'react-tooltip';
You can use Material UI tooltip also Its easy to manage and also long text can be used easily
import { Tooltip } from '#mui/material';
<Tooltip title='your tooltip title' >
<HelpIcon>
</Tooltip>
To solve this, define the data-for attribute and the id for the regarding tooltip:
<div data-tip='This field represents all sales (or revenues) generated by the company.' data-for='questionMarkToolTip'>
<HelpIcon></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true} id='questionMarkToolTip'/>
</div>
I am using an ant design modal on my site which is internationalized. The modal works fine for all languages except Arabic. When it is on Arabic, when you click the 'next' button, it should show you the next page of the modal, but it just shows a blank modal. I suspect because Arabic is a RTL language, this issue would be solved if I could get the modal to slide in the other direction when the user hits next. I see on Ant Design's documentation they have some mention of RTL functionality on the modal page, but I'm not sure how to implement it. It says
Modal.method() RTL mode only supports hooks.
but i'm not sure what it means by that.
On this configuration page it mentions a direction prop, but I passed it a string "rtl" and that didn't seem to have an effect. It says the prop type should be rtl or ltr, so it shouldn't take a string?
Use configProvider and wrap all antd components in it with direction="rtl". you can also apply it conditionally: direction={condition ? "rtl" : "ltr"}.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Reference: https://ant.design/components/config-provider/?theme=dark#header
Is it possible that the Material UI api docs are out of date? Or is there another place to check for element preferences?
i.e. MenuList https://material-ui.com/api/menu-list/ has a property disablePadding to disable the top and bottom padding of the element, but there is no apparent documentation on that.
import { MenuList } from "#material-ui/core";
...
<MenuList disablePadding> ... </MenuList>
disablePadding is from the List component.
In the Inheritance portion:
The properties of the List component are also available.
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>
);