Display: 'inline-block' only present with constraints prop

[DewarM]

Currently, the style display: inline-block is applied to the RegionSelect component. This is currently breaking.

Idea1(easy):

Remove display: inline-block and replace with a conditional that applies this style only if constraints prop is true.

Idea2(harder):

Pass a ref to the underlying child, access this ref and measure the width/height and use these child widths and heights for constraints.

[DewarM]

I tried implementing both ideas, however the way that the rendering of regions works (with %values) makes it very hard to get correct positioning with idea2.

Idea1 is far more simple, but I am now realising issues with this approach. Let me know your thoughts @davidlanger

[d0b1010r]

Yepp conditionally changing this makes it hard for the Component use to know which style is applied. The user would not suspect that changing constraint would change the style. Need to think about that a bit more.

Btw: In our project we now use the constraint with addition to style={{ display: 'block' }} and that works fine. Whats the bug you are seeing with constraint + display: block? Perhaps display: inline-block is not even needed :)

[DewarM]

When I use constraint without setting the display the width of the div that the regions are constrained by are 100% of the parent div. Hence, the regions can continue over the child.

Example

You can see in the example that initially the display: inline-block is set and the region is constrained. However, when it is removed the div fills to 100% width and the region is allowed to move outside of the child.

I can fix this by just adding style={{display: 'inline:block'}} as your suggested. However, I wanted other user to be able to use constraint and be sure that will work without further properties in the code. (like setting display on the parent div). Or maybe you think that this isn't an issue?

I can also fix by doing something like:

<div style={{display: 'inline-block'}}>
    <RegionSelect constraint={true} maxRegions={1} regions={this.state.regions} onChange={this.onChange} regionRenderer={this.regionRenderer}>
        <img src='/static/example-doc.jpg' width='700px'/>
    </RegionSelect>
</div>

Maybe you guys are already doing something like this? Let me know your thoughts 👍