Develop Reference

MUI - How to get theme.mixins.toolbar.minHeight value responsively?

I wonder how to use mui's theme.mixins.toolbar to calculate height: calc(100vh - toolbar)?
I am currently trying to do
function SwipeCard() {
return (
<Box
sx={{
height: (theme) => `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
paddingTop: (theme) => theme.mixins.toolbar.minHeight + "px",
}}
>
hello world
</Box>
);
}
export default SwipeCard;
But when I change viewport size and the toolbar becomes bigger. Theme.mixins.toolbar.minHeight stays the same at 56 instead of expected 64?

So I found out you can just add a second empty Toolbar to act as the padding for your content if your main Toolbar position is fixed. It comes automatically with the same media queries as the main Toolbar.

If you make this {...theme.mixins.toolbar} you will get the minHeight responsively.
So I used this in Box component that I placed above to simulate paddingTop.

Using if on height prop in vuetify

I have some card with height prop for height ofc..
I need to have different heights for xs and higher sizes so I did this:
<v-card height="250"> --> works
<v-card :height="[$vuetify.breakpoint.xs ? 450 : '250']">
And I get error that says, number or string expected got array.
For other things like :class, :style etc works fine...

Try a computed property to return the height like :
computed:{
getHeight(){
return this.$vuetify.breakpoint.xs ? 450 : '250';
}
}
and inside template :
<v-card :height="getHeight">
if you don't want to use any property you could use it by removing the brackets like :
<v-card :height="$vuetify.breakpoint.xs ? 450 : '250'">

React JS (JSX) div not rendering unless text is added to div

I am trying to render an image inside a div tag using styling as I want the image to dynamically resize based upon the size of the window.
Here is the JSX code
const heroImage = "pathToImage";
const heroImageStyling = {
backgroundImage: `url(${heroImage})`
};
ReactDOM.render(
<div style={heroImageStyling}></div>,
document.getElementById("root")
);
Running this doesn't render anything on the page
If text is added to the div tag like so, a small portion of the image is rendered to the screen (a long strip the same height as the text)
<div style={heroImageStyling}>Test Text</div>
How could I correct this problem and render the image to the screen?

div without content and width height won't render. You can have 2 approaches here:
put inside div (when you don't want to define width/height)
ReactDOM.render(
<div style={heroImageStyling}> </div>,
document.getElementById("root")
);
define either width or height or both in div styling
const heroImageStyling = {
backgroundImage:url(${heroImage}),
height: 200px,
width: 200px
};
ReactDOM.render(
<div style={heroImageStyling}></div>,
document.getElementById("root")
);

Try set height style to div like this
const heroImageStyling = {
backgroundImage: `url(${heroImage})`,
height: 300px,
};

Solved by manually adding a height property to the div tag using Jquery to get the window height
let screenHeight = $(window).height() + "px";
const heroImageStyling = {
backgroundImage: `url(${heroImage})`,
height: screenHeight
};

chart.setSize not working properly?

It is working only on window resize when on div(container) resize the chart is getting resized
From the below code you can check the component of reactgridlayout for draggable but not the chart in the paper. On window resize it's working fine i need with div resize(on draf of paper component).
onLayoutChange(layout) {
console.log(layout);
//chart.setSize(null, null);
}
_loadSavedChart(){
return (
<ResponsiveReactGridLayout layouts={this.state.layout}
onLayoutChange={this.onLayoutChange}
className={this.state.className}
rowHeight={this.state.rowHeight}
cols={this.state.cols}
initialLayout= {this.state.layout}
initialWidth={this.state.initialWidth}
width={this.state.width}
verticalCompact={false}
listenToWindowResize={false}
currentBreakpoint= 'sm'
>
{this.state.savedChartinDashboard.map((data, i) =>
<Paper key={i} className="c3chart" style={style.chartPaperStyle} zDepth={1}>{this._renderChart(data)}
</Paper>
)}
</ResponsiveReactGridLayout> )
}
I need to make use of this in react component instead of in jquery. I have a layout change how to make use of this in that.
$('#resizer').resizable({
// On resize, set the chart size to that of the
// resizer minus padding. If your chart has a lot of data or other
// content, the redrawing might be slow. In that case, we recommend
// that you use the 'stop' event instead of 'resize'.
resize: function () {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});

React Native flexible view sizing within a paged scrollview

I'm trying to use a ScrollView (with paging enabled) in React Native to page through a series of images. Anyone know how to make the image views fill each page of the scroll view? So far I've only had luck hard coding width and height values for the image style.
Here's roughly what I'm doing:
render: function() {
return (
var images = [{ url: 'http://url/to/image.jpg' }, { url: 'http://url/to/another-image.jpg'}];
<ScrollView horizontal={true} pagingEnabled={true} style={styles.myScrollViewStyle}>
{images.map(image => {
return (
<Image source={{uri: image.url}} style={styles.myImageStyle} />
);
})}
</ScrollView>
);
}
The only way images show up is if I hardcode a width/height number in the style. I've been unable to get the Image to just flex to fill 1 whole page.
ScrollView style:
scrollView: {
flex: 1,
backgroundColor: '#000000',
}
Image style:
image: {
width:375,
height:667,
flex: 1,
backgroundColor: 'rgba(0,0,0,0)',
}

To set image dimensions use next code:
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
...
image: {
width: windowSize.width,
height: windowSize.height,
flex: 1,
backgroundColor: 'rgba(0,0,0,0)',
}

I do not believe it is possible to achieve this using only Flex right now, as it is going to try to contain all the images within your container.
ScrollView does have a contentContainerStyle={} property however, so I could envision a solution being something like setting the width of the container to be (window.width * number of items) which would then allow flex:1 on each image child do what you expect.
Unfortunately there is currently no way to fetch the window width (yet) https://github.com/facebook/react-native/pull/418
At the moment it seems like hard coding dimensions is the only option.