I have cards to render in the grid list of material-ui. Each card has an image file at the top and some content in the remaining part, whenever there is a difference in content(text) card height changes. As far now I have tried most of the things to achieve the same height for each card, none of them worked. I am providing codesandbox link below.
working example of cards in grid list
Since your content area card (with the className "content") is to have fixed height for each card, you need to make sure the content-text is the same, or else you can give height to the content card like this :
content: {
height : "200px"
},
This would produce this as output :
However, here the height of the content card is hardcoded, so you need to make sure the content size accordingly matches.
In CardContent styling you should specify maxHeight and give it overflow. Something like:
<CardContent
style={{
paddingBottom: "0%",
maxHeight: "100px",
overflow: "auto"
}}>
Related
I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains at a minimum 400px which means a scrollbar appears for the x axis.
You can see a minimal reproducible example here: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&resolutionWidth=400&resolutionHeight=675
In the example, the min width actually seems to be marginally wider and it always overflows a little, but the principle is still the same.
What I need to do is ensure the padding/whitespace ebtween the elements squeezes together when there's a screen smaller than 400px. I've tried manually overriding the padding both in the sx of the BottomNavigation component, and with the styled utility. With styled I removed the padding from the last child, but then all of the padding of the rest of the items grew to always fill 400px.
I understand there's always a limit; I can't expect to have 5 items on a 200px wide screen. But I should be able to go a bit lower than 400px. Note: If I jsut have 4 items, it resizes jsut fine.
Here' my code currently:
<BottomNavigation
value={value}
onChange={(_, index) => {
getPageIndex(index);
}}
sx={{ maxWidth: "100vw" }}
>
// 5 nav icons
</BottomNavigation>
I found a solution: change the minWidth of action items to 70px. By default it's 80px.
const CustomisedBottomNavigationAction = (props: any) => (
<BottomNavigationAction sx={{ minWidth: "70px" }} {...props} />
);
then, each child of your BottomNavigation:
<CustomisedBottomNavigationAction
label={PageNames.Home}
icon={<HomeIcon />}
component={RouterLink}
to={NavigationRoutes.Home}
/>
Using import {dimension} from 'react-native' and flex:1 at the same time in css style and for some devices design got broken when there is input field present inside the js. CSS is so simple that's it should not be broken
MainContainer: {
height : Dimensions.get('window').height,
width : Dimensions.get('window').width,
backgroundColor: '#fff',
flex: 1
}
and moreover there is slight 1 px blank space for some android devices.
Earlier when I have started coding with react-native I have faced the same issue while using the same css style.
You should read the documentation first carefully to get idea about flex.
flex will define how your items are going to “fight” over the
available space along your primary axis. Most of the time you will
want your app container to be flex:1 to take all of the screen
height. Space will be divided according to each element flex property.
In the following example the red, yellow and the green views are all
children in the container view that got flex:1. The red view got
flex:1 , the yellow view got flex:2 and the green view got
flex:3 . 1+2+3=6 which means that red view will get 1/6 of the
space, the yellow 2/6 of the space and the red 3/6 of the space. I
think you got it…
To get more clear idea about the above lines please refer to this medium.com's post
And basically we don't use dimension while developing app using react-native .
MainContainer: {
height: '100%',
width: '100%',
backgroundColor: '#fff',
}
This will be enough to design the main container. Also If you are using Input field then I will suggest to use scrollView
I think My answer will help you.
I have tried to set each widthPercent on each TableHeader to add up to 100%, but the scroll bar is still there.
I can set static widths per column, but I end up with extra space on the right depending on the size of the window.
How do I make the table always use the full width available to it, but also always wrap text so the table does not need horizontal scroll?
I solved it:
MuiTable css override:
tableLayout: "fixed"
MuiTableCell css override:
overflow: "hidden", textOverflow: "ellipsis"
How can I get content widths to size up in Fancybox? I would have expected this to automatic as I only set minWidth, but it seems only the initial width, when you open the modal dialog remains static. I have set maxWidth, but that has no effect on the width whatsoever. I remove all the width settings, and the content shows up crammed up in a small width area. I am confused as to how to get this working correctly.
$('a.various').fancybox({
scrolling:'no',
minWidth:450,
minHeight:450,
openEffect:'none',
closeEffect:'none',
closeBtn:false
});
This gives me increasing heights, but widths stay static. I need the width to increase when let's say there is a larger image and such. I tried setting the minWidth property to 640, but that produce too much whitespace to the right of images that are smaller in width.
Make sure also to set the autoSize to true:
autoWidth : true,
You don't need the minWidth.
And the HTML you want the be displayed inside fancyBox also should have a specific given width.
Fx. if you want the content to be 300px in width, set the body to be 300px in width:
<body style="width: 300px;">
That's the way I do it. Hope it works :D
I have a container div that need to be flexible in height because the content inside the div can change when users click on the button.
<div id="container">
<div id="divBuyNow">
<button id="btnBuyNow">
Buy Now</button>
</div>
</div>
$("#btnBuyNow").click(function () {
$("#divBuyNow").animate({
opacity: 0,
marginRight: '200px'
}, 1000, function () {
$("#divBuyNow").hide();
});
$("#platformsContainer").animate({
opacity: 1,
marginRight: '170px'
}, 2000);
});
What I understand is you want to animate platformContainer to height based on the content. If yes, set overflow:hidden to container and modify contents to innerDiv inside the container with opacity:0. When you want to show, get the height of innerDiv and animate container div to height + margins and other offset.
If you dont mess up something in styles and you dont set height for that div, it will be flexible ;-) (from code i see above it seems that your button is there all the time and you are only hiding it...)
A div tag by default will be flexible in height and width(it adjusts itself according to the content placed inside it). You should be fine as long as you do not set the height and width css properties explicitly.
Just a note : In case of nested divs just be sure that you do not set the height and width property of the inner div. If you do so the outer div becomes inflexible i.e it will have the dimensions of the child div.