title: Why does jqxMenu appear incorrectly?
body: <p>I am working on my own module for an angular project. I am trying to make a menu using jqxMenu, but when I run ng serve it does not appear the way it should. I ve imported jqxmenucomponent into my component as shown below</p>
  <pre><code>import { Component, OnInit, ViewChild, ViewChildren, ViewRef } from '@angular/core';
  import { jqxMenuComponent } from 'jqwidgets-ng/jqxmenu';
  import { DiagramPaperComponent} from '../diagram-paper/diagram-paper.component'
  
  @Component({
    selector: 'app-statemachines-menu',
    templateUrl: './statemachines-menu.component.html',
    styleUrls: ['./statemachines-menu.component.scss']
  })
  
  export class StatemachinesMenuComponent implements OnInit {
      @ViewChild(DiagramPaperComponent) public readonly paper: DiagramPaperComponent;
      @ViewChild('jqxMenu') jqxMenu: jqxMenuComponent;
      
      public ngOnInit() {
         
      }
      
      public ngAfterViewInit() {
          this.centerItems();
      }
  
      public centerItems(): void {
          let firstItem = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].firstElementChild;
          let width = 0;
          let borderOffset = 2;
          let allLiElements = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].children;
          for (let i = 0; i &lt; allLiElements.length; i++) {
              let currentLi = allLiElements[i];
              width += currentLi.offsetWidth + borderOffset;
          }
          
          let menuWidth = this.jqxMenu.elementRef.nativeElement.firstElementChild.offsetWidth;
          let calculatedOffset = (menuWidth / 2) - (width / 2);
          firstItem.style.margin = '0 0 0 ' + (calculatedOffset).toString() + 'px';
      }
  
      public onResize(event: any): void {
          let innerWidth = event.target.innerWidth;
          this.centerItems();
      }
  }
  </code></pre>
  <p>I ve also imported jqxMenuModule into my module as shown below</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { jqxMenuModule } from 'jqwidgets-ng/jqxmenu';
  import { DiagramPaperComponent } from './diagram-paper/diagram-paper.component';
  import { StatemachinesMenuComponent } from './statemachines-menu/statemachines-menu.component';
  
  @NgModule({
    declarations: [ DiagramPaperComponent, StatemachinesMenuComponent],
    imports: [CommonModule, jqxMenuModule]
  
  })
  
  export class StatemachinesModule { }
  </code></pre>
  <p>this is what the content of the menu in HTML</p>
  <pre><code>&lt;div #content (window:resize)=&quot;onResize($event)&quot;&gt;
      &lt;jqxMenu #jqxMenu [width]=&quot;'100%'&quot; [height]=&quot;30&quot;&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/module.png' /&gt;
            &lt;span&gt;Add New State&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            
            &lt;span&gt;Inputs&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            
            &lt;span&gt;Outputs&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/save.png' /&gt;
            &lt;span&gt;Save Diagram&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/load.png' /&gt;
            &lt;span&gt;Load Diagram&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/sourcecode.png' /&gt;
            &lt;span&gt;Generate Code&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/jqxMenu&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The result what I am getting after I run ng serve is below, basically it is just a list of text with images. Images are loaded correctly.</p>
  <p><a href="https://i.stack.imgur.com/6uwwZ.jpg" rel="nofollow noreferrer">jqxmenu appereance</a></p>