Hidden view still visible partly

[TiPunch69]

• a HSplit view is used with a with VSplit view inside
• the right side is hidden

and the min, max constraints are not set,

Than a small part of the right side view (around 10 pixel) are shown over the left side view. This can be removed by either padding the right inside view or adding the constraints.

HSplit(left: {
     VSplit(top: {
                    },
                    bottom: {
                    })
                    .fraction(0.5)
                    .styling(color: Color.blue, inset: 30, visibleThickness: 1)
                    //.padding(.trailing, 0)
                },
                right: {
                })
                .fraction(0.6)
                .constraints(minPFraction: 0.5, minSFraction: 0.3) <-- this line makes the difference
                .styling(color: Color.blue, inset: 30, visibleThickness: 1)
                .hide(self.showDetails)
            }

[stevengharris]

Thanks for letting me know. I will check into it!

[stevengharris]

Sorry, it's confusing and somewhat buried in the README! It's actually behaving correctly. If you want the splitter to be hidden completely whenever you hide the side, you can use hideSplitter: true in your styling:

.styling(color: Color.blue, inset: 30, visibleThickness: 1, hideSplitter: true)

When you add the constraint in, then the splitter is hidden automatically when you hide the side that is constrained:

---

One thing to note is that if you specify minPFraction or minSFraction, then when
you hide a side that has its minimum fraction specified, you won't be able to drag
it out from its hidden state. Why? Because it doesn't make sense to be able to drag
from the hidden side when you never could have dragged it to that location to begin
with because of the constraint. As soon as you tried to drag it, the splitter
would snap to an allowed position, which is also jarring to users. To make sure
there is no visual confusion about whether a splitter can be dragged, the splitter
will not be shown at all when it is not draggable. Again: a splitter will be
non-draggable when a side is hidden and the corresponding minPFraction or
minSFraction is specified. Note that just like setting hideSplitter
to true in the styling modifier, if your splitter can become non-draggable,
you need to include a means for your user to unhide a view once it is hidden,
like a hide/show button.

---

[stevengharris]

I think I was too quick on the "close" trigger finger and need to double-check.

[stevengharris]

I reopened because I didn't remember seeing "a small part of the right side view (around 10 pixel) are shown over the left side view", and I thought the empty views might have disguised it in a way that led me to believe everything was okay when it wasn't. So I put some Colors into your code and put it in as the "Simple Adjustable" case in DemoApp:

case .simpleAdjustable:
    HSplit(
        left: {
            VSplit(
                top: { Color.green },
                bottom: { Color.red }
            )
            .fraction(0.5)
            .styling(color: Color.blue, inset: 30, visibleThickness: 1)},
        right: { Color.yellow }
    )
    .fraction(0.6)
    .styling(color: Color.blue, inset: 30, visibleThickness: 1)
    .hide(demo.holders[0].hide)

This works as it should, leaving the full 1 pixel wide blue splitter showing on the right that can be dragged out again after hiding. Then if you add hideSplitter: true to the styling:

    .styling(color: Color.blue, inset: 30, visibleThickness: 1, hideSplitter: true)

the splitter is also hidden (and cannot be dragged back out but has to be restored using the hide/show button). So I think this is all working as intended. Feel free to reopen if I missed anything. Thanks.