Fix table row display

This commit is contained in:
Aurelsicoko 2017-10-12 15:24:35 +02:00
parent b3dca34d8e
commit 2dc7d8009d
4 changed files with 23 additions and 6 deletions

View File

@ -3,6 +3,7 @@
border-collapse: initial; border-collapse: initial;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 4px #E3E9F3; box-shadow: 0 2px 4px #E3E9F3;
table-layout: fixed;
tr, th, td{ tr, th, td{
border: none; border: none;

View File

@ -58,10 +58,14 @@ class TableRow extends React.Component {
// Generate cells // Generate cells
const cells = this.props.headers.map((header, i) => ( const cells = this.props.headers.map((header, i) => (
<td key={i}> <td key={i}>
{this.getDisplayedValue( <div className={styles.truncate}>
header.type, <div className={styles.truncated}>
this.props.record[header.name] {this.getDisplayedValue(
)} header.type,
this.props.record[header.name]
)}
</div>
</div>
</td> </td>
)); ));

View File

@ -18,6 +18,18 @@
} }
} }
.truncate {
display: table;
table-layout: fixed;
width: 100%;
}
.truncated {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.actions { .actions {
text-align: right; text-align: right;

View File

@ -68,7 +68,7 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
<ModalBody className={`${styles.modalBodyAdvanced}`}> <ModalBody className={`${styles.modalBodyAdvanced}`}>
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
{map(take(this.props.form.items, 2), (input, key) => ( {map(take(this.props.form.items, 1), (input, key) => (
<Input <Input
key={key} key={key}
type={input.type} type={input.type}
@ -153,7 +153,7 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
: <Button type="submit" onClick={this.props.handleSubmit} className={styles.primary}><FormattedMessage id="content-type-builder.form.button.continue" /></Button>; : <Button type="submit" onClick={this.props.handleSubmit} className={styles.primary}><FormattedMessage id="content-type-builder.form.button.continue" /></Button>;
const modalBody = this.props.showRelation ? this.renderModalBodyRelations(): this.renderModalBodyAdvanced(); const modalBody = this.props.showRelation ? this.renderModalBodyRelations(): this.renderModalBodyAdvanced();
return ( return (
<div className={styles.popUpRelations}> <div className={styles.popUpRelations}>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={`${styles.modalPosition}`}> <Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={`${styles.modalPosition}`}>