I want to extend the TextInput to the entire screen and not set a definite width.
To do that I know we have to set "flex:1"
But it doesn't seem to work at all.
What is wrong here?? I want the TextInput to be stretched with the Button next to it.
<View style={{flex: 1, alignItems: 'stretch' , flexDirection: 'row'}}>
<TextInput value="nil" style={{ backgroundColor:"grey", height: 40}} textAlign='center'/>
<Button title="V" onPress={()=>{this.dropList()}} />
</View>
I want something like this. How do I get this???
You can use CSS Grid in your View, adding grid-template-columns for the columns width, like:
display: grid;
grid-template-columns: 1fr 3rem;
width: 100%;
With inline styles (not recommended at all):
{{ display: 'grid'; gridTemplateColumns: '1fr 3rem'; width: '100%' }}
You are putting the flex property on the parent whereas it needs to be applied on the TextInput itself.
Bonus: You don't need to set flexDirection to row because that's the default.
Here's a pure HTML, CSS example to show what I mean.
.view {
display: flex;
}
.view input {
flex: 1;
}
<div class='view'>
<input/>
<button>Click Me</button>
</div>
Related
I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:
Also upon resizing, some images get cut as well:
This is the code for the CardMedia part:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={product.img_urls[0]}
alt={product.name}
title={product.name}
sx={{ padding: "1em 1em 0 1em" }}
/>
// Other Content
</Card>
Overall, I want to achieve something like this but with all the cards in the same height and width:
Is there any way I can fix this or do I need to resize each image individually?
You need to make your pictures to fill their layouts, AND keep their aspect ratio.
The best way is to set their "object-fit" css property to "contain".
Try this:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={imageNetwork}
alt={"alt"}
title={"titleasdasdsada"}
sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
/>
// Other Content
</Card>
Try this
parent-image-element {
width: 100px;
}
image {
width: 100%;
max-height: 100px;
}
How can I place text at the bottom of a div in plain old React (not React Native)?
In html, you can place text at the bottom of a div by using
vertical-align: text-bottom;
In React Native, it looks like you place text at the bottom of a div by using
textAlignVertical: "bottom",
Is there a simple way to place text at the bottom of a div in plain old React?
The only method I got to work so far is is to use Flexbox.
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Codesandbox
Edit: This is a simplified example. What I really need is a div with items in several different spots, and text on the bottom.
Edit: In both HTML and React, vertical-align: text-bottom; does not move text to the bottom of a div. It only shifts the text down a little bit to the bottom of where the text would normally be. So in both HTML and React, it can be used to shift text down a little for a subscript. But in both HTML and React, it can't be used to shift text way down to the bottom of a div.
You could use margin:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
marginTop: 'auto'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Or align-self:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
alignSelf: 'flex-end'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
I noticed you mentioned the div has lots of other information in a more complicated example. I would highly recommend trying out css grid if you haven't already. It allows you to structure the items on your screen very easily.
Here's an example using grid to create the 'holy grail layout' which is by no means the best example but it shows how easy it is to structure divs in different areas of the screen.
https://codepen.io/frazermg/pen/bXbXOR?editors=1100
.container {
display: grid;
grid-template-areas: 'header header header header'
'left content content right'
'left content content right'
'footer footer footer footer';
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(30vh, auto);
}
.header {
background-color: blue;
grid-area: header;
}
.left {
background-color: green;
grid-area: left;
}
.content {
background-color: #eee;
grid-area: content;
}
.right {
background-color: pink;
grid-area: right;
}
.footer {
background-color: orange;
grid-area: footer;
}
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
Here is an example of nested grids:
https://codepen.io/frazermg/pen/ZgEwVd
This website is very useful for all things css, especially flexbox and grid.
https://css-tricks.com/snippets/css/complete-guide-grid/
I hope this can help you!
What about simply style any span or component with text inside a div like this:
... style={{position:"absolute",bottom:"0px"}} ...
I have a button with absolute position, used for a form. When inside a KeyboardAvoidingView it goes on top of the other elements
const BtnContainer = styled.View`
position: absolute;
bottom: 38px;
left: 16px;
width: ${Dimensions.get('window').width - 32};
`
<KeyboardAvoidingView
behavior="padding"
enabled
style={{ flex: 1 }}
keyboardVerticalOffset={60}
>
// form content
<BtnContainer>
<Button
text={getButtonLabel()}
disabled={!isButtonEnabled()}
onPress={stepChangeCallBack}
/>
</BtnContainer>
</KeyboardAvoidingView>
I tried behavior="position" and it breaks all the layout and behavior="height" also doesn't work.
I have been programming a lot in React Native and I'm trying React js (only web) and I don't know to make a simple View that get all screen to start play with all components.
Let me explain:
In React Native I handle the View dimensions with flex, something like this:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.5, backgroundColor: 'blue' }}>
<Text>I'm a blue 50% screen View!</Text>
</View>
<View style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<Text>I'm a yellow 50% screen View!</Text>
</View>
</View>
But in React JS I have to use div tags that doesn't recognize flex.
I mean, I cannot do this:
<div style={{ flex: 1 }}>
<div style={{ flex: 0.5, backgroundColor: 'blue' }}>
<p>I'm a blue 50% screen View!</p>
</div>
<div style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
How I have to use that styles in React js for the divs to get the percentages results?
React Native uses its own flexbox implementation - https://facebook.github.io/react-native/docs/flexbox
In React you are using CSS flexbox - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.
In css, you also need to declare parent container as
.flex-container {
display: flex;
}
and that is probably what you are missing.
pure CSS version of your flex would probably look like this (styles as "string" version):
<div style="display: flex; flex-direction: column; height: 100vh;">
<div style="flex: 1; background-color: blue;">
<p>I'm a blue 50% screen View!</p>
</div>
<div style="flex: 1; background-color: yellow;">
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}
Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>
Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.
Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).
This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}
If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>
If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>