I use framer-motion with next params:
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
But instead of scaling it seems to be translating by X.
This item has next css properties:
display: flex;
flex-direction: column;
margin-left: 50px;
look a video:
https://www.awesomescreenshot.com/video/13121928?key=24fb66bc4fd804516e16d34aaf573a84
Related
The below UI is of antd tabs. I need to expand the tab item but for some reason it doesn't work as expected.
Current UI:
Desired UI:
Code:
const App = () => (
<Tabs
defaultActiveKey="1"
onChange={onChange}
style={{ display: "flex", justifyContent: "space-between" }}
>
<TabPane tab="Details" key="1" style={{ width: "50%" }}>
Content of Tab Pane 1
</TabPane>
<TabPane tab="Updates" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
);
Even though I have given justify-content:space-between or custom width it doesn't change.
Codesandbox: https://codesandbox.io/s/basic-antd-4-22-4-forked-hxise4?file=/demo.js
According to the docs you should use tabBarStyle instead of style. You can read more here: https://ant.design/components/tabs/
EDIT:
by applying tabBarStyle the CSS properties are appended to the upper div (the red container). In order to work it should be applied to the bottom div (the blue container):
You can try custom styling via CSS
EDIT #2:
This worked fine for me:
.ant-tabs-nav-list {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ant-tabs-tab {
width: 50%;
justify-content: center;
}
I have a Material UI <Paper> component that serves as a background and exists in my main React component- it's nested inside a <ThemeProvider>, which is nested a <div>, which is then nested in the <body>. I've applied the viewport: 100vh attribute to make it take the full height of the screen. It does take up the full height, but only prior to rendering another <Paper> component on the right hand side. Then the bottom of the paper no longer extends to the bottom of the screen:
Beginning of App render method:
return (
<ThemeProvider theme={theme}>
<Paper style={{ height: '100vh', boxShadow: 'none' }}>
<Container fluid id='app'>
.......
)
I tried applying the viewport: 100vh attribute to both the <div> that encloses the App component in index.js and the <body> element in index.html. There wasn't any difference. It may be worth mentioning that I'm using react-bootstrap Containers/Rows/Cols for my grid system at the moment (haven't switched that part to Material UI yet), but they're all nested inside the Paper, so I wouldn't expect they would be causing the problem. I also tried removing any css applied to the <Container> but it didn't help.
I'm also using a muiTheme for the <ThemeProvider> (obviously):
export default function createTheme(isDarkModeEnabled) {
return createMuiTheme({
palette: {
type: isDarkModeEnabled ? 'dark' : 'light',
primary: {
main: '#6DD3CE',
dark: '#639FAB'
},
secondary: {
main: '#52CBC5'
}
},
typography: {
fontFamily: [ 'montserratlight', 'Times New Roman' ].join(','),
body2: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
},
h3: {
fontSize: '1.75rem'
},
button: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
}
}
})
}
Update and Solution
I did redo my layout using flexbox instead of react-bootstrap, and ultimately fixed the problem by using min-height: 100vh instead of height: 100vh for my container so it had room to expand.
It appears that your <Container> has a bit of padding that is causing the content to go beyond its height:
This could also be due to your <textarea /> not having an assigned height. This is a particular issue when you are in a medium-sized screen.
If you are already planning to do away with Bootstrap's layout system, consider flex box and styled containers:
import React from "react";
import styled from "styled-components";
export default function App() {
return (
<Container>
<StyledHeader>Hello StackOverflow</StyledHeader>
<StyledCol>
<p>This is column 1.</p>
</StyledCol>
<StyledCol>
<p>This is another column.</p>
</StyledCol>
</Container>
);
}
const Container = styled.div`
height: 700px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
`;
const StyledHeader = styled.h1`
height: 30%;
width: 100%;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const StyledCol = styled.div`
height: 70%;
width: 50%;
& p {
text-align: center;
}
`;
CodeSandbox Example: https://codesandbox.io/s/stack-63802170-flexbox-example-909ol
This will ultimately give you more control over the layout of the page.
I am basically trying to create something like this:
Two boxes, the red one is vertical text and the blue one is horizontal text. The height of the red box should be the same as the blue box
I know that I can make text sideways like that by doing:
transform: [{ rotate: '-90deg'}]
on it, but I am having issues getting the rest to work correctly and having the boxes be aligned and sized properly. Any help would be greatly appreciated!
You should really try playing with the layout of React Native and post what you have tried but here's a sample code
<View style={{ height: 100, flexDirection: 'row'}}>
<View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text style={{transform: [{ rotate: '-90deg'}]}}>Value</Text></View>
<View style={{ flex: 8, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center'}}><Text>Short Text</Text></View>
</View>
Result:
So little style pointers:
flexDirection is by default column, so if you don't say its a row,
your views will stack vertically
flex fills your screen in the flexDirection. I have 2 elements in my row with flex, so view1 will take up 1/9th of the space and view2 will take up 8/9th
Alignitems will align your items in the direction of your flex, so horizontally if it's a row, vertically if it's a column.
justifyContent aligns item in the crossaxis, so if your flex is a row, it will align items vertically
Ohey its the same as css
This fiddle should get you close: https://jsfiddle.net/1f8png0r/4/
I would stay away from styling using JS at all costs - (mainly $.css() and $.transform(), etc) It is much slower than CSS and CSS is much easier to maintain down the road -- especially if you can learn to style your selectors nicely!
To break it down a little - you want to create a .row a .left column and a .right column. Inside the .left column you want some text. You want to transform that text and rotate it -- rotate(90deg). I have never used the flex vs. inline-flex for this before now, but after needing to do horizontal text a handful of times I think it is the most robust IMHO.
The main focus is to create the grid as you need it, and to transform the content in the left column of the grid relative to the column (rather than relative to the row).
Hopefully this helps get you closer, cheers!
HTML
<div class="row">
<div class="left">
<span class="h-text">LEFT</span>
</div>
<div class="right">RIGHT</div>
</div>
CSS
.row {
width: 756px;
height: 100px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.right {
width: 80%;
height: 100%;
background: red;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left {
width: 20%;
height: 100%;
background: blue;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left .h-text {
position: absolute;
transform: rotate(-90deg);
}
you could do this.
https://codepen.io/anon/pen/yGepmm
This is an aproach using flexbox. I use sass for clear syntax (no ; )
.sass
div:first-child
display: flex
justify-content: center
align-items: center
transform: rotate(270deg)
width: 100px
background: blue
color: white
text-align: center
vertical-align: middle
div:nth-child(2)
display: flex
padding-left: 2rem
background: lightgreen
justify-content: start-end
align-items: center
color: grey
height: 91px
width: 100%
.html
<section>
<div>
Value
</div>
<div>
Lorem Ipsum
</div>
</section>
It's a very less code implementation, you will have to calculate for now, manually the:
height of div:first-child (which it's the width because the
rotation).
And the height div:nth-child(2).
Hope this helps
I implemented this way giving fixed height and some tweak with flex:
<View style={{flex: 1, paddingTop: 40}}>
<View style={{ flexDirection: 'row', height: 100 }}>
<View style={{ backgroundColor: 'red', justifyContent: 'center' }}>
<Text
style={{
textAlign: 'center',
transform: [{ rotate: '-90deg' }],
}}>
Value
</Text>
</View>
<View
style={{
flex: 1,
backgroundColor: 'aqua',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Some text here....</Text>
</View>
</View>
</View>
Here is the link to snack if you want to play around. Might have extra unnecessary styles. You can play with it in the snack.
I hope, you got the idea?
https://snack.expo.io/#roshangm1/humiliated-cookies
I'm using the ant.design Card component to display the messages for a chat webapp in react/redux. Right now each card gives too much space around the card. Is there anyway to make the card wrap the text closer?
Where the React code is:
<Card
bordered={false}
style={{
// other styles...
width: width,
height: 70 <== just decreasing this number doesn't work
}}
>
<p>{message.contents}</p>
</Card>
Just decreasing the height doesn't work and produces:
Instead of using Cards I just used a regular p tag with borderRadius and padding:
<p
style={{
borderRadius: '25px',
padding: '4px 15px 4px'
}}
>
You can use the inline style property bodyStyle to apply styles to the card content.
The better way to keep your components clean use css.
<Card className="custom-card" bordered={false}>
<p>Hey Hunter</p>
</Card>
css:
.custom-card {
width: 100px;
height: 35px;
}
.custom-card > .ant-card-body {
display: table;
width: 100%;
height: 100%;
padding: 5px;
}
.custom-card > .ant-card-body > p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Check the DEMO.
I would inspect the element in the dev tools first, but more than likely, you should set the height of the card to 'auto' and add padding to the text inside. Putting a class on the p tag:
<p class='message-contents'>{message.contents}</p>
and targeting it:
.message-contents {
padding: 20px;
}
will set the space inside of the card to 20px on each side of the text. Change this to what you want.
Also I suggest using a class on the card also and putting all styling in an external stylesheet, but either works.
You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px. (n stands for natural number.)
You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32 } for responsive design.
You can use a array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].
https://ant.design/components/grid/
I am rendering a simple view. It consists of an image on the right and some text on the left. This is how it looks like:
return (
<View style={styles.companyContainerStyle}>
<View>
<Text>{this.props.companyNameAr}</Text>
<Text>{this.props.descriptionAr}</Text>
</View>
<View style={styles.imageContainerStyle}>
<Image
style={styles.imageStyle}
source={{ uri: this.props.logo }}
resizeMode='contain'
resizeMethod='auto'
/>
</View>
</View>
);
The following is the styles I applied to make the text and image aligned next to each other:
const styles = {
companyContainerStyle: {
flex: 1,
flexDirection: 'row',
padding: 10
},
imageContainerStyle: {
borderRadius: 5,
borderWidth: 2,
borderColor: '#2279b4',
padding: 1,
},
imageStyle: {
flex: 1,
height: 100,
width: 100,
}
}
The very weird part is that it looks like this on the emulator:
I think the length of the text is pushing the image to the very right out of the screen. I thought that the number of lines would adjust accordingly to fit everything in the screen. However its not the case. How do I make everything look neat given that the length of the text is unknown (it is being rendered from a database)??
#container {
display: flex;
justify-content: space-around;
width: 70%;
height: 400px;;
border: 2px solid grey;
padding: 5px;
}
#top_content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#para {
width: 60%;
text-align: justify;
margin: 0px;
}
img {
height: 20%;
width: 20%;
}
<div id="container">
<div id="top_content">
<p id="para">adfasdfadf sadfdaafafdasdfadfadfadfdfad dasadfadfadfadfadgvfa sasadasdaf asdfdfdadfadf</p>
<img src="http://lorempixel.com/400/200" alt="myimg">
</div>
</div>
Something like this can make sure that your text will not push your img outside
Add flex: 1 to imageContainerStyle and also add flex: 1 to View that is container of the two Text components.
Reason for this is that if the Text component does not have container with flex: 1 on it the text will try to take all possible space. The container will restrict that