This is what I currently have:
<TooltipHost
content="Enter claim name in a way to be understandable for all parties."
directionalHint={DirectionalHint.rightCenter}
calloutProps={{ calloutMaxWidth: 100}}
>
<TextField />
</TooltipHost>
The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?
The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.
Related
I am trying to create a sign-in button where the button displays 'Sign-in' when the user is not signed in and their profile picture when they are signed in.
The button displays the right things when I use text instead of an image when the user is signed in.
{!user || !isSignedIn ? 'Sign in' : 'Profile'}
I am unsure how to add the image to use as a button instead.
You are trying to wrap image inside the button tag which is wrong approach. You should use Input Tag to embedded image on button or you can use image as a backgroundUrl for button, With the help of conditional class styles you can show text or imagebackground on button. which is more obvious and better approach I think.
<input type="image" src="youpathtoimage" />
or
<button style="background: url(yourimage.png)" />
for conditional styles I've always used MUI CLSX. If you are using Material UI in your project. Try to use CLSX.
I am trying to implement rich text in a dialog box which I picked from Material-UI. For doing so I am using a package react-medium-editor. If I place it inside dialog box it does not convert the text to rich text but outside the dialog box it does.
What can be the problem
Here is the sample project that I made to demonstrate.
Codesandbox link
You can make react-medium-editor work with Material-UI's Dialog by setting the prop: disableEnforceFocus to true.
<Dialog
disableEnforceFocus
open={open}
onClose={() => handleClose()
{...otherDialogProps}
>
// Dialog Content
</Dialog>
WARNING: According to Material-UI's docs on disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while
open.
Generally this should never be set to true as it makes the modal
less accessible to assistive technologies, like screen readers.
I'm working with Material UI to create the UI for the web application I'm designing. After placing some TextFields within a Grid using theme spacing, I'm having troubles with the inner text of the the TextField no longer being centered within its container. As soon as I remove the theme spacing from the style applied to the TextField, there's no problem anymore.
Here's a codesandbox that showcases the problem: https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js
Does anyone know how to recenter the text within its TextField? Thanks.
Try Moving the textInput class to Grid instead of TextField.
<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>
If you inspect and see the HTML, it seems that Material-UI doesn't apply that class to the label but only to the input. Moving the class at grid level should apply it to the entire container (label and input)
I am trying to get the scroll height of the multi-line text field. I have used office UI fabric react TextField.
I have tried to get the TextField scroll height in the ComponentDidUpdate() /jQuery, but it always returns scrollHeight as 0.
AutoHeightAdjust property works fine when I am entering input in the TextField. But, when I am trying to show the data from the state in the TextField it does not fit to the size of the content. That's where the real problem is.
This is my tag:
<TextField disabled={this.isDisabled} autoAdjustHeight value={this.state.Action} onChanged={this.handleAction} multiline resizable={true} rows={6}/>
I'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14