.tree-element {
background: rgb(247, 247, 247);
cursor: pointer;
position: relative;
width: 100%;
box-sizing: border-box;
}
<div className={this.props.edit ? "" : "tree-element"} style={style}>
<div
style={this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : '')) > 0 ?
{color: '#4a4293',
padding: "0 0 5px 25px",
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
fontWeight: 400} :
this.props.childrens ? (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0) ?
{padding: "0 0 5px 25px",
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
color: '#8b8b92',
fontWeight: 300} :
{padding: "0 0 5px 25px",
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
color: '#8b8b92',
fontWeight: 300,
position: 'relative',
left: -15} : {}}
onClick={ e => {
this.props.toggleNode(this.props.id, stateIsOpenNodeTree);
}}
>
{
!((this.props.childrens && this.props.childrens.length > 0) || (this.props.users && this.props.users.length > 0))
? ''
: this.props.opened
? open
: (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0)
? close
: ''
}
{this.props.edit ?
''
:
<div
style={this.props.name ? this.props.name.length > 48? {paddingTop: 5, wordBreak: 'break-word', overflow: 'hidden', height: '35px'} :
{paddingTop: 5, wordBreak: 'break-word'} : ''}
>{this.props.type !== 'POSITION' ?
<IconGroup style={this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : {}))>0 ? {color: '#4a4293',height: 20, width: 20, position: 'absolute', left: 25, top: 3} :
{color: 'darkgrey',height: 20, width: 20, position: 'absolute', left: 25, top: 3}}/> :
<Portfolio style={this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : {}))>0 ? {color: '#4a4293',height: 20, width: 17, left: 25, position: 'absolute', top: 3} :
{color: 'darkgrey',height: 20, width: 17, position: 'absolute', left: 25, top: 3}}/>}
<div className="text-max-line-2" style={{marginLeft: '25px'}}>{this.props.name}</div>
<div style={this.props.name.length > 92 ? {display: 'block'} : {display: 'none'}} className="text-patch-tree-organization"></div>
</div>
}
</div>
<div
style={this.state.subdivision || this.state.position ?
{marginRight: 10} : {marginRight: 10}}
>{this.props.edit ? "" : this.props.user_type ? EditEmployeeMenu(this.props.id) : EditNodeMenu(this.props.id, this.props.parent_id, this.props.elementId)}</div>
</div>
Нужно сделать так, чтобы элемент (три точки по середине) не двигался, а если текст заходит на его блок, то он скрывался и текст, который не влезает прятался и было отображены ...
(три точки). text-overflow: ellipse
я делал. В общем не знаю как сделать, что бы эти ***
не двигались если заходит на их поле.
<span>
и назначить ему свойствоfloat:right