SidePanel in the middle of component?

So I’ve got this happening with a SidePanel object…


and here’s where it “hides” to…

And here’s the only code regarding the SidePanel component… don’t think any of this should be causing the issue.

DissMapComponent::DissMapComponent()   : distributionPanel ("DistributionPanel", 150, true,
                                                            &distributionPanelContent,
                                                            false)
{
    distributionPanel.setTitleBarComponent (&title, false, false);
    distributionPanel.setTitleBarHeight (25);
    distributionPanel.setShadowWidth (0);
    addAndMakeVisible (distributionPanel);
}

Anyone have this issue before? Could the panel’s content component (distributionPanelContent) cause this? I don’t think there’s any obvious culprits there either. :\

Without seeing any more of your code it’s hard to say, but it looks like you’re adding the SidePanel as a child of the wrong component. It uses its direct parent to calculate the bounds so you need to add it as a child of the component that you want it to be on the side of.

Here’s a simple example:

/*******************************************************************************
 The block below describes the properties of this PIP. A PIP is a short snippet
 of code that can be read by the Projucer and used to generate a JUCE project.

 BEGIN_JUCE_PIP_METADATA

  name:             SidePanelExample

  dependencies:     juce_core, juce_data_structures, juce_events, juce_graphics, juce_gui_basics
  exporters:        xcode_mac

  moduleFlags:      JUCE_STRICT_REFCOUNTEDPOINTER=1

  type:             Component
  mainClass:        MainComponent

 END_JUCE_PIP_METADATA

*******************************************************************************/

#pragma once


//==============================================================================
class MainComponent   : public Component,
                        private Timer
{
public:
    //==============================================================================
    MainComponent()
    {
        sidePanel.setTitleBarHeight (25);
        sidePanel.setShadowWidth (0);
        addAndMakeVisible (sidePanel);
        
        startTimer (1000);
        
        setSize (600, 400);
    }
    
    ~MainComponent()
    {
    }
    
    //==============================================================================
    void paint (Graphics& g) override
    {
        // (Our component is opaque, so we must completely fill the background with a solid colour)
        g.fillAll (getLookAndFeel().findColour (ResizableWindow::backgroundColourId));
        
        g.setFont (Font (16.0f));
        g.setColour (Colours::white);
        g.drawText ("Hello World!", getLocalBounds(), Justification::centred, true);
    }
    
    void resized() override
    {
        // This is called when the MainComponent is resized.
        // If you add any child components, this is where you should
        // update their positions.
    }
    
    
private:
    void timerCallback() override
    {
        sidePanel.showOrHide (show);
        show = ! show;
    }
    
    //==============================================================================
    struct Content  : public Component
    {
        void paint (Graphics& g) override
        {
            g.fillAll (Colours::hotpink);
        }
    };
    
    SidePanel sidePanel { "panel", 250, true, new Content() };
    bool show = true;
    
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

Sorry, should’ve clarified… I do want it attached to the grey DissMapComponent so that, when hidden, it hides behind the panel on the left. (It’s like a sub-menu for displaying and editing data for items in the leftmost panel). Is this not an appropriate use for Sidepanel? Could just use ComponentAnimator to do the exact same thing, if needed.

Something interesting… the leftmost panel (which is stationary) is 175px while the SidePanel is 150px. The gap between them when the SidePanel is “hidden” is 25px. If I change the width of the leftmost panel to 150px, the “hidden” SidePanel closes the gap to meet with the panel on the left. (Or, setting the SidePanel to 175px does the same, making the SidePanel wider than the other causes overlap, etc.) Haven’t gone through much of the SidePanel code yet, but is this to be expected or a bug?

Like I said, it’s hard to say without seeing the relevant parts of the code. Are you able to reproduce this with a minimal test example that you can share?