CODEPEN: https://codesandbox.io/s/94lw648lmo?fontsize=14
I have been using Material-ui with react.
I'm trying to make a list that contains long text.
When long text is given text is shown like the picture but, I want multiline text.
Here is my code snippet of it.
<List>
{this.props.novels.map((novel, index) => (
<ListItem alignItems="flex-start" key={index} role={undefined}>
<ListItemText primary={<span>{novel.text}</span>} />
<ListItemSecondaryAction>
<Button>
<ThumbUp />
</Button>
<span>{novel.like}</span>
<Button>
<ThumbDown />
</Button>
<span>{novel.dislike}</span>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
Please let me know if you need more info.
Thanks.
Accepted answer did not work for me, here is what worked:
<ListItemText
primary={tooLongTitle}
primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />
you can add the following CSS to your cell:
word-wrap: break-word;
Hope it helps
Related
I am creating a dashboard in react with FLuentUI. I have a row of textBoxes and they are just not lining up - as you can see. Can someone give me a starter please on how to line these up :
As you can see the 'Enter text here is not straight with the others. here is my react code.
return (
<div style={{ fontSize: FontSizes.size42 }} className="ms-Grid" dir="ltr">
<ProducingBroker currency={currency} setCurrency={setCurrency} />
<BrokerContact currency={currency} setCurrency={setCurrency} />
<OriginalInsured currency={currency} setCurrency={setCurrency} />
<ReinsuredName currency={currency} setCurrency={setCurrency} />
<label>{mailboxitem.itemId}</label>
</div>
I know I need to put some styling around it, just need a starter please.
I have a component that is passed as a label prop. I need to add width: 100% for it because otherwise, I cannot use justify-content: space between for my div. Here is how it looks like in developer tools.
return (
<div className={classes.row}>
<Checkbox
value={deviceId}
className={classes.checkbox}
checked={Boolean(selected)}
onChange={handleToggle}
label={
<div>
<Tooltip title={t('integrations.deviceEUI')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{deviceEui}
</Typography>
</Tooltip>
<Tooltip title={t('integrations.deviceName')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{name || ''}
</Typography>
</Tooltip>
</div>
}
/>
</div>
);
};
I'm not sure I fully understand the issue, but if you want to simply add styles to a React component, you can simply do the following:
cont labelStyle = {
width: '100%'
};
Then inside your return statement, you could attach this labelStyle to the parent <div> like so:
<div style={labelStyle}>
//other components
</div>
If this isn't what you really mean, then please consider outlining the issue a little more clearly, thanks!
In React Native version of this problem, you can simply give the "style" prop to the component as:
const NewComponent = ({style}) => {}
and now you are able to reach to the "style" prop from another file.
Now, "style" prop is available to use in "NewComponent", write the following code:
<NewComponent style={{}}/>
in my app I'm working with mui-datatables. I added a custom toolbar to the table with one additional button, which is added into the row with the other buttons. But when I add a second button, it gets added below, although there is enough space. How can I display the second button in the row with the other ones?
const HeaderElements = () => (
<>
<AddNewButton />
<ExportJsonButton />
</>
);
<MUIDataTable
title=""
data={rows}
columns={columns}
options={{
selectableRowsHeader: false,
selectableRowsHideCheckboxes: true,
customToolbar: () => (<HeaderElements />),
}}
/>
I found the solution by myself: has to be wrapped in a Button:
<Button>
<AddNewButton />
</Button>
I have an AntD Modal which has a Form that I'm struggling to align some text on. Here is what it looks like with the text highlighted in yellow. I would like it to be aligned with the first column where I've drawn the red box.
The section of code that contains the "personal information" text and the applicant form fields looks like this:
<Form
ref={this.formRef}
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
id="myForm"
validateMessages={validateMessages}
initialValues={{ applicants: [{ firstName: '' }] }}
>
{
<Form.List name="applicants">
{(fields, { add, remove }) => {
return (
<div>
<Form.Item {...formItemLayout}}>
<Row>
<Col span={24}>
Personal Information
</Col>
</Row>
</Form.Item>
{fields.map((field, index) => (
<Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
<Row key={field.key} gutter={[0, 8]} justify="start">
<Col span={12}>
<Row gutter={[4, 4]}>
<Col span={7}>
<Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
<Input placeholder="First Name" ref={this.inputRef} />
</Form.Item>
</Col>
I thought perhaps if I set the label to a blank space it'd accomplish what I want on the form item and it does, but of course, the colon remains which I don't want. So I'm guessing this is not the right way to accomplish this and perhaps there's a better CSS route to go or something.
I'm looking for help on how to get the alignment that I want. Ultimately I'd also like to put "Employer Information" aligned with the right column over the employer information as well.
EDIT #1
Adding a simplified codesandbox of this problem here. Appreciate any ideas!
CodeSandBox
There is an option for Form.Item to display the colon behind the label. You can check it out here
Disable it would accomplish what you want
<Form.Item {...formItemLayout} label=" " colon={false}>
<Row gutter={[0, 8]} justify="start">
<Col span={12}>Personal Information</Col>
<Col span={12}>Employer Information</Col>
</Row>
</Form.Item>
You can add labelCol and wrapperCol like below:
<Form
layout="horizontal"
labelCol={{
span: 6
}}
wrapperCol={{
span: 18
}}
labelAlign="right"
>
...
</Form>
I cannot remove underline in input text
I guess it should be
underlineColorAndroid="transparent"
See the related issue https://github.com/facebook/react-native/issues/10108
Use underlineColorAndroid property of TextInput component
<TextInput underlineColorAndroid='transparent'
placeholder="type here ..">
TXT
</TextInput>
Following prop in TextField works for me
underlineColorAndroid='rgba(0,0,0,0)'
I found another way to surcharge InputContainer styles directly on the TextInput :
inputContainerStyle={{borderBottomWidth:0}}
I found a simple solution
underlineColorAndroid='#FFF'
I agree with above answers but it produces following problem randomly
https://github.com/facebook/react-native/issues/18214
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)
So i get up with other solution. I added editbox style in style.xml
<item name="android:background">#android:color/transparent</item>
---------------------------Full code------------------------------------
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowBackground">#color/backgroundcolor</item>
<item name="android:editTextStyle">#style/AppEditTextStyle</item>
</style>
<style name="AppEditTextStyle" parent="#style/Widget.AppCompat.EditText">
<item name="android:background">#android:color/transparent</item>
<item name="android:minHeight">40dp</item>
</style>
underlineColorAndroid="transparent" is perfectly working for me
<TextInput
underlineColorAndroid="transparent"
placeholder="Your Placeholder"
/>
See Discussion here
Following prop in TextField works for android 6 to up
underlineColorAndroid='transparent'
Following prop in TextField works for android 6 to down
borderWidth={0}
so you should both props to work in every devices
underlineColorAndroid='transparent'
borderWidth={0}
If you're still looking for a solution and underlineColorAndroid='transparent' doesn't do the trick then try autoCorrect={false}.
Example :
<TextInput autoCorrect={false} underlineColorAndroid='transparent' placeholderTextColor={Colors.gray} style={styles.input} autoCapitalize='characters' placeholder="Type your word" />
I found only one way to remove underline exactly from input container:
<TextField
placeholder="user#gmail.co"
InputProps={{ disableUnderline: true }}
/>