Moving resizer in modal/popup not working

[A77X7]

I place SplitterLayout in devextreme Popup component and Splitter inside it does not work now (but shown). Any suggestions?

[zesik]

Hi,

I haven't got a chance to use devextreme components. Could you provide a demo or some more information (like whether there is any JS error)?

[A77X7]

Hi, I research the problem and behold that .getBoundingClientRect() in event handlers returns 0,0,0,0 (in MouseMove event for example). This is a known issue and there are many posts about it in the forums. But I have not seen a guaranteed solution. As far as I understand, the reason is that the DOM at the time of the call has not yet finished building the elements. I partially resolved the problem by manually creating popups by place splitter in div:

<div style={{ left: '0', top: '0', right: '0', bottom: '0', position: 'absolute', zIndex: 999, backgroundColor: 'rgba(255,255,255,0.8)' }}>
  <div className='sgpBackColor' style={{ left: '5%', top: '5%', right: '5%', bottom: '5%', position: 'absolute', zIndex: 1000 }}>
    Splitter...
  </div>
</div>

But this is a bad idea, I think...

P.S. I tried also a component of react-split-pane and experimented mostly with him

[zesik]

I just tested in a minimal code base, but couldn't reproduce your problem (I can drag the splitter). My code is like this:

    render() {
        return <Popup ref={this.popup} contentRender={this.renderSplitter} />;
    }

    renderSplitter() {
        return (
            <SplitterLayout>
                <div>First</div>
                <div>Second</div>
            </SplitterLayout>
        );
    }

Could you let me know what your source code looks like, if possible?

[A77X7]

Thank you! You saved my nerves! I was desperate already. But contentRender some reason not documented. My previous code was like:

<Popup resizeEnabled visible={true}  onHiding={(e) => this.frmAddHiding(e)} >
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
        <SplitterLayout>
            <div>First</div>
            <div>Second</div>
        </SplitterLayout>
    </div>
</Popup>