# Flexbox aligned components shouldn't overlap

**URL:** <https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185>\
**Category:** General JUCE discussion\
**Created:** [July 4, 2017, 6:35am UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185 "2017-07-04T06:35:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chkn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chkn/32/3862_2.png) [@chkn](https://forum.juce.com/u/chkn)\
**Post date:** [July 4, 2017, 6:35am UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185/1 "2017-07-04T06:35:46Z")

</div>

I use code like this

```
        Rectangle<int> r({ getWidth() /2 , 0 },
					 { x2 , getHeight() });

    	FlexBox flex;
    	flex.flexDirection = FlexBox::Direction::row;
    	flex.flexWrap = FlexBox::Wrap::noWrap;
    	flex.items.add(FlexItem(*dryVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20,0, 20,0)));
    	flex.items.add(FlexItem(*dryFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
    	flex.items.add(FlexItem(*wetVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20, 0, 20, 0)));
    	flex.items.add(FlexItem(*wetFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
    	flex.performLayout(BorderSize<int>(10).subtractedFrom(r));

```

This code, layouts the given components in 4 columns.

And the result is, depending on the given rectangle, that sometimes the right-border will overlap with the left-border of a component with 1 pixel. The rounding algorithm should be changed, so that components (which always have integer coordinates) will always have a zero pixel gap (if not defined differently)

---

<div class="post-metadata">

**Author:** ![chkn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chkn/32/3862_2.png) [@chkn](https://forum.juce.com/u/chkn)\
**Post date:** [July 4, 2017, 1:38pm UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185/2 "2017-07-04T13:38:13Z")

</div>

i modified the juce demo to reconstruct the problem

I removed the margin, and made the items half-transparent.

Sometimes the components will overlap, sometimes not.

Please have a look at the screenshot:

 ![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/2/23ed4c726de42fa3b2e8e8f7a19b4e5f394e46e1.png)

---

<div class="post-metadata">

**Author:** ![chkn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chkn/32/3862_2.png) [@chkn](https://forum.juce.com/u/chkn)\
**Post date:** [July 11, 2017, 4:26pm UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185/3 "2017-07-11T16:26:43Z")

</div>

bump

---

<div class="post-metadata">

**Author:** ![t0m](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/t0m/32/16413_2.png) [@t0m](https://forum.juce.com/u/t0m)\
**Post date:** [July 17, 2017, 5:45pm UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185/4 "2017-07-17T17:45:43Z")

</div>

This is fixed on the develop branch.

---

<div class="post-metadata">

**Author:** ![chkn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chkn/32/3862_2.png) [@chkn](https://forum.juce.com/u/chkn)\
**Post date:** [July 20, 2017, 4:53pm UTC](https://forum.juce.com/t/flexbox-aligned-components-shouldnt-overlap/23185/5 "2017-07-20T16:53:06Z")

</div>

Thank you very much, looks good!