Using Semantic-UI sidebar with Angular 2 #4877

Open
peb7268 opened this Issue Jan 2, 2017 · 2 comments

Projects

None yet

2 participants

@peb7268
peb7268 commented Jan 2, 2017

So I know there are some dupe issues floating around about the following error messages:
Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
*Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag *

I think my use case is a bit different than those though.

I can't make my sidebars direct children of the body tag since they need to exist in an angular root element and making 3 separate ngModules ( 1 for the app, and one for each of my two sidebars ) would be wildly inefficient and problematic in this case ).

That leaves me with solution of trying to use a custom context to initialize my sidebar. I tried that solution and it doesn't work still. It tells me it keeps having to move the sidebar to be more efficient.

Attached is a screenshot of my DOM structure.

screen shot 2017-01-02 at 4 24 55 pm

@IonutBajescu
Member

Can you also show me the javascript bit that initializes the sidebar?

@peb7268
peb7268 commented Jan 3, 2017

Sigur ca pot!

I currently have this:

toggleProjectSideBar(){
    $('.left.sidebar')
    .sidebar('setting', 'transition', 'overlay')
    .sidebar('toggle');

    window.setTimeout(function(){
      let input:any = $('.left.sidebar input');
      input.focus();
    }, 500);
  }
  
  toggleHomeSidebar(){
    $('.home.sidebar')
    .sidebar('setting', 'transition', 'overlay')
    .sidebar('toggle');
  }

but I also tried:

$('.left.sidebar')
    .sidebar({
        "context": "app-root app-home .admin-wrapper projects-sidebar"
    })
    .sidebar('toggle');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment