I was wondering...does anyone know if it's possible to add customized text on the inside of the a Material UI Circular Progress element? If so, what is the best way to do this? Thanks!
Material-UI is based on the Material Design spec by Google.
The spec for "Progress Activity" doesn't have text inside any of the circular elements. MUI is only going to officially support the material design spec.
If you take a look at the code for CircularProgress, then you can see that it is rendering a SVG element. (Also visible in dev tools in your browser.)
I suggest you fork MUI and fiddle with the Circular Progress element until you get what you want.
You can make the text absolute and place it on top of Progress bar.
<div style={{position: 'relative'}}>
<span style={{position: 'absolute', top: '10px', left: '2px'}}>100%</span>
<CircularProgress />
</div>
top and left values you can set as per you.
Add <Box/> with display: flex, justifyContent: center and alignItems: center. Also Add position: absolute to <Typography/>
<Box display='flex' justifyContent='center' alignItems='center'>
<CircularProgress/>
<Typography position='absolute'>{99}%</Typography>
</Box>
Like Mike pointed out, In Mui there is no built in support for adding text inside progressbar. Using css absolute property is an option ,but can have potential responsiveness issues. I suggest to use React-circular-progressbar as an alternative. It is responsive, but make sure you use it within some other parent element like Box/Paper or anything else of required size.
Related
I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.
This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).
I have a custom component which needs its height to be set explicitely. I'm having trouble with calculating the available space on different devices.
The top bar is no problem cause I use the StatusBar height, but on the bottom, the iPhone X has some space for that "bar" and I don't know how to calculate this (I could match the device but maybe there are more devices with this space on the bottom).
Is there any way to calculate this? I'm using Expo btw.
I don't know what is your primary goal but here are my suggestions:
If you want to calculate the available height you can create a View with style {flex:1} then use onLayout built-in function of a View. Here how it works:
onLayout=({nativeEvent})=>{
// Here is height
console.warn(nativeEvent.layout.height)
}
<View style={styles.container}>
<YourComponents/>
{/*The part you want to calculate height*/}
<View style={{flex:1}} onLayout={onLayout}/>
</View>
If you want to just avoid the notch of the device you can use SafeAreaView. Here is the full documentation. PS. react-native's built in SafeAreaView component has been moved to react-native-safe-area-view
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
Setting Max Width can also be useful as it makes a fix width for all cells
I also had some issues, and finding a solution landed on this page but didn't work the given suggestions for me. so i have added any tag <div style={{width:300}}> <p style={{width:300}}> inside <Tablecell> like this and it worked.
<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>
hope this works for others also
I have a weird trouble in my React app. If I set a child's position to absolute and it's parent to relative.(Doesn't matter if using inline style or https://material-ui.com/customization/css-in-js/)
Then in Firefox it will show it as it should by css standards - A child positioned left right etc. relative to its direct parent but in chrome (Version 70.0.3538.77 ) it shows the child positioned relative to the body of document.
const DataTableFooter = ({totalCount, page, size, onChangePage, onChangeRowsPerPage}) => {
return (
<TableFooter>
<TableRow
style={{
position: 'relative',
}}>
<TablePagination
style={{
position: 'absolute',
bottom: 0,
right: 0,
}}
/>
</TableRow>
</TableFooter>
);
};
export default DataTableFooter;
Ironically plenty of the google searches about css absolute positioning errors I did came up with stories about how Firefox will not position the child relative to its parent in such situation and chrome does,(do I have an oppsoite day or hwat?) but with nothing useful.
I seem to have determined the problem. As is seen in the example code in my question I was dealing with tables and the react elements shown there will generate appropriate HTML TABLE elements. (Not divs styled as table etc but actual td tr etc.)
The table elements will not respond to position:relative in chrome as it is undefined in standard
https://www.w3.org/TR/CSS21/visuren.html#choose-position
' The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined. '
The title says it all.
Is it possible to add the Semantic UI Reveal effect to Images in Cards?
This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering.
Moreover, when using Semantic UI without React, it is totally possible.
It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.
See that offset?
So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:
https://codesandbox.io/s/v8mylv1p3
Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.
I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.
Last update in March 2018:
"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"
In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):
...
<Card>
<div className={'ui slide masked reveal image'}>
<Image src='/img/products/1.jpg' className={'visible content'} />
<Image src='/img/products/2.jpg' className={'hidden content'} />
</div>
<Card.Content>
<Card.Header textAlign={'center'}>
Product name
</Card.Header>
...
This results in a minimum impact with the desired funcionality :)