Display hangs on HTML - html

Question

I had a problem about views on the website, the display will be right when i do somenthing to display, for example, when i type something in the textbox, it will be displayed correctly and when i resize my browser, the appearance will be true also.
This is example when the display is wrong :
and then this is example when the display is right and this is happened after i resize my browser :
my checkbox treeview will show after i resize my browser.
this is my code, mybe the problem in here :
export class AdministrationMenuGroupEditor{
rows = [];
menuList = [];
selectedMenu: any = [];
//id
public id:number;
public statusForm:string;
//form start
public form:FormGroup;
public submitButtonText:string;
public inHTML5 = true;
public name:AbstractControl;
public description:AbstractControl;
public submitted:boolean = false;
constructor(protected service:AdministrationMenuGroupEditorService, private route: ActivatedRoute, private fb:FormBuilder, _ref: ChangeDetectorRef){
this.route.params.subscribe(params => {
this.id = +params['id'];
});
}
ngOnInit(){
this.submitButtonText = 'Save';
this.form = this.fb.group({
'id': [],
'name': ['', Validators.compose([Validators.required,Validators.minLength(3)])],
'description': []
});
this.name = this.form.controls['name'];
this.description = this.form.controls['description'];
this.service.getMenuGroup()
.subscribe(
data => this.setMenuGroup(data['menuGroup']),
err => this.logError(err),
() => this.finishedGetIndexList('Save')
);
this.statusForm = 'Add';
if(this.id){
this.fetchData();
}
}
setMenuGroup(value){
if (value.length > 0){
this.menuList = value;
console.log(this.menuList);
}
}
fetchData(){
this.service.getIndex(this.id)
.subscribe(
data => this.setValueToForms(data['menuGroup']),
err => this.logError(err),
() => this.finishedGetIndexList('Fetch')
);
}
toggleFormControl(formName:string,value:boolean) : void {
let ctrl = this.form.get(formName);
value==false ? ctrl.disable() : ctrl.enable();
ctrl.markAsUntouched();
}
validationDataInput(value){
if(value == 'name invalid'){
console.log('This name was used, please input different name');
return false;
}
return true;
}
setValueToForms(value) : void {
console.log(value);
if(value.length > 0){
if(this.validationDataInput(value)== true){
this.rows = value[0];
if(this.rows['id']){
this.id = this.rows['id'];
}
this.form.setValue({
'id': this.id,
'name': this.rows['name'],
'description': this.rows['description']
});
this.menuList = value[0]['menuList'];
this.selectedMenu = [];
this.statusForm = 'Edit';
}
}
else{
this.statusForm = 'Add';
}
}
onSubmit(values:Object):void{
values['selectedMenu'] = this.selectedMenu;
this.submitted = true;
this.submitButtonText = 'Saving...';
if (this.form.valid) {
this.service.getSave(values,(this.id)?'edit':'new')
.subscribe(
data => this.succeededSave(data['menuGroup']),
err => this.logError(err),
() => this.finishedGetIndexList(' Save'),
);
}
}
finishedGetIndexList(msg){
console.log('Finish '+msg);
this.submitButtonText = 'Save';
this.submitted = false;
}
logError(errMsg){
let errStatus = errMsg['status'];
window.alert('An error has been detected, please reload this page..');
this.submitButtonText = 'Save';
this.submitted = false;
}
succeededSave(result){
this.setValueToForms(result);
}
}
Is there anyone who can help my problem ?