I have a text element inside a view:
<View><Text>hello world foo bar</Text></View>
as part of a flex grid.
I want this view to have an auto width based on the content i.e. length of the text.
How do I achieve this?
You can achieve this if element will have alignSelf property, like:
alignSelf: 'flex-start'
or
alignSelf: 'center'
you can always set minWidth: some width and then align it to the center
Related
I put two items (e.g. two buttons) in one row. I want to align the first item left, and align the second item right, which looks like:
How to achieve this in react native using flex?
After some digging, I found there're two easy ways to achieve this:
// first way
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<Button>B1</Button> // align left
<Button>B2</Button> // align right
</View>
// second way
<View style={{flexDirection: "row"}}>
<Button>B1</Button> // align left
<Button style={{marginLeft: "auto"}}>B2</Button> // align right
</View>
to do this, use space-between. If the container has a width larger than the 2 buttons, you'll see one on the left, one on the right
doc
I created a container to limit my app to 600px(sm) width, but when I did it the drawer breaks. Instead of rendering in the container page side, it is inside the appBar.
When the width is more than 600px (the page limit), the drawer is rendering inside the appBar (picture incorrect). When the page is smaller than 600px it renders correct (picture correct).
I am using material-ui components, the app bar is position as absolute, because I am implementing on scroll events. To centralize the app bar I use:
maxWidth: 600,
[theme.breakpoints.up("sm")]: {
left: "50%",
transform: "translate(-50%, 0)"
}
Here is codesandbox example code:
https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js
You should make drawer sibling with AppBar instead of it's children
return (
<div className={classes.grow}>
<AppBar className={classes.app_bar}>
...
</AppBar>
{renderDrawer}
</div>
);
We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.
This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:
menu: (provided) => ({
...provided,
background: '#DDDDDD',
marginTop: '-1px',
zIndex: 10,
height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
}),
is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?
Thanks!
First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.
This then did the trick for me:
menuList: (provided) => ({
...provided,
maxHeight: null
}),
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I wanted to add some padding to my TextField component so I applied that to the root 'style' property.
But now the underline isn't staying within that area and is overflowing out to the right by the padding amount. It also seems to ignore any padding left or right I try and apply to it and just goes full 100% width of the container element.
I can fix it's width using the underlineStyle prop, so for now I've just set it to 95%, however this can get a bit ugly as the width gets a lot wider. But I can't for the life of me figure out how to express 'width: '100% - 5px' ' in JSX??
Is this possible? I'm sure I just have some syntax wrong.
Thanks in advance
<TextField
inputStyle={styles.inputStyle}
value={props.messageValue}
name={props.name}
onChange={props.handleFieldChange}
errorText={props.messageError}
floatingLabelText={props.floatingLabelText}
underlineStyle={styles.underlineStyle}
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
**underlineFocusStyle={styles.underlineFocusStyle}**
style={styles.fieldStyle}
>
{props.children}
</TextField>
underlineFocusStyle: {
borderBottom: 'solid 1px',
borderColor: grey50,
width: '95%'
},
width: 'calc(100% - 5px)' should work.