opened initially shows sidebar even if false

[Ketec]

[opened]="false"
[(opened)]="state" / public state: boolean = false;

In both cases it initially shows sidebar on page load for a moment - until change detection i assume.

If i remove the opened from attributes, it won't initiall show (and well icant show it ether).

[ebtroy]

This is happening to me as well.

[arkon]

I can't seem to reproduce this. Are there any other options that you've used?

[Ketec]

                <ng-sidebar
                    [(opened)]="settingsOpened"
                    position=right
                    [autoFocus]=false
                    [trapFocus]=false
                    [mode]="'over'"
                >

settingsOpened is false (settign it false in there still causes the bug).

[arkon]

I still can't seem to reproduce the issue. Do you have some styles for the sidebar too?

[Ketec]

.ng-sidebar {
    box-shadow: -4px 0px 3px -1px #e5e5e5;
    background-color: #f3f3f4 !important;
    overflow: visible !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    z-index: 100 !important;
}

ng-sidebar-container {
    flex-basis: 100%;
    width: auto !important;
}

There is however another instance of a sidebar inside it's (using different property for opened).

<div class="content-panel-area">
	<ng-sidebar-container>
		<!--Global sidebar-->
		<ng-sidebar-container ng-sidebar-content>
			<!-- Main view/routes wrapper-->
			<div ng-sidebar-content>
				<router-outlet></router-outlet>
			</div>
			<ng-sidebar
				[opened]="opened"
				position=right
				[autoFocus]=false
				[trapFocus]=false
				[mode]="'over'"
			>
				<sidebar-content></sidebar-content>
			</ng-sidebar>
		</ng-sidebar-container>

		<!-- Settings sidebar -->
		<ng-sidebar
			[(opened)]="settingsOpened"
			position=right
			[autoFocus]=false
			[trapFocus]=false
			[mode]="'over'"
                        class="settings-module"
		>
			<settings></settings>
		</ng-sidebar>
	</ng-sidebar-container>
</div>

the settings sidebar has a style override for higher z-index.

[kotmatpockuh]

the same issue :(

[Ketec]

Bit of testing and it seems like animations are to blame:

:host /deep/ .settings-module .ng-sidebar--animate[_ngcontent-c6] {
    -webkit-transition: none !important;
    transition: none !important;
}

Quick override to this and the bug is gone - but so is the animation. It seems like the animation is triggered in the beginning and in some cases (larger app, slower initial load and wider sidebar), it becomes noticeably visible.

In the code:
@Input() animate: boolean = true;
There is a line:
// Prevents an initial transition hiccup in IE (issue #59)
So i assume a similar bug.

Currently i set [animate]="initialAnimateDisable" default as false and set it enabled the first time i set opened true.

[arkon]

Thanks for the investigation and suggestion, @Ketec . I've published v6.0.4 with a change based on yours.

[RezaRahmati]

Same for me, is this issue solved?

On first refresh it shows the slider and hides it

[arkon]

Open another issue. It should be fixed though, unless you can reproduce the problem in a basic setup.

[RezaRahmati]

I found a workaround

animate = false;
  ngOnInit() {
    setTimeout(() => {
      this.animate = true;
    }, 1000);
  }

<ng-sidebar [(opened)]="sideOpen" [position]="'right'" [animate]="animate">

[ef32]

This issue seems to have resurfaced in the latest version

[arkon]

There hasn't been an update in 3 months...

[jomol-aima]

Anybody solved this issue? I am facing this issue in my application and not able to figure it out

[lasantha57]

@RezaRahmati is right! Problem is with the [animate]="true". Either we can remove it or this workaround would work.

  animate = false;

  ngOnInit() {
    setTimeout(() => {
      this.animate = true;
    });
  }