Button can't be seen in Form with IE8

Suite and Optimus Suite 5
#1

Hi everyone:
I’m using dhtmlx4.6 ver.
My Problem is: When using IE8,the buttons can’t be seen in a dhtmlxForm ,while The dhtmlxForm is created in a dhtmlxWindow.
The init process looks like :
setp1: I create a form.

var menuAddForm = menuAddCell.attachForm();
var menuFormStructure = [
 {type: "block",  name: "mydata", label: "添加菜单", width:480, list:[
            {type: "input", name: 'menuName', label: '菜单名称:',position:"label-left",required:true},
            {type:"input", name:"menuParent", label:"上级菜单:",position:"label-left",readonly:true,required:true}
          ]}
];
 menuAddForm.loadStruct(menuFormStructure);

step2: I attach an “onclick event” to the form which is created in step 1.
When the event triggered,it will prompt an dhtmlxWindow,the dhtmlxWindow is attached with another form, which
is composed by one container and two buttons.

            menuAddForm.attachEvent("onFocus", function(name){
                if(name == "menuParent"){
                    //Create an Window
                    var dhxWins= new dhtmlXWindows();
                    var win = dhxWins.createWindow("mywindow", 500, 105, 360, 220);
                    dhxWins.window("mywindow").setText("请选择上级菜单");
                    dhxWins.window("mywindow").center();
                  //These two buttons can't be seen in IE8,when using 'select all(ctrl+A)',you can see the "button value".
                    var str = [
                        { type:"container" , name:"winTreeContainer", inputWidth:300, inputHeight:100  },
                        { type:"button" , name:"okBtn", value:"确定", inputLeft:90, inputTop:130, position:"absolute"  },
                        { type:"button" , name:"cancelBtn", value:"取消", inputLeft:180, inputTop:18  }
                    ];
                    //Create a Form in Window
                    var form = win.attachForm(str,true);
                    form.loadStruct(str);
                    var winTree = new dhtmlXTreeObject(form.getContainer('winTreeContainer'),'100%','100%','0');
                    winTree.setImagesPath("/libs/dhtmlx/skins/web/imgs/dhxtree_web/");
                    winTree.enableTreeLines(true);
                    winTree.load("/rbca/getAllMenu",function(){},"json");
                    return true;
                }
            });

The picture looks like


Is there anything wrong with my code?
Thanks in advance :slight_smile:

#2

I try an simple test on 5.0ver,4.6ver,4.12ver and encounter the same problem,is it a bug when using IE8 ?
my test demo like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Minimal init</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../skins/web/dhtmlx.css"/>
	<style>
        	/* it's important to set width/height to 100% for full-screen init */
        	html, body {
            	width: 100%;
            	height: 100%;
            	margin: 0 0px;
            	overflow: hidden;
        }
    	</style>	
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
        function doOnLoad(){
            //window.dhx4.skin = 'dhx_web';
            var main_layout = new dhtmlXLayoutObject(document.body, '1C');
            //modify cell a
            var menuAddCell = main_layout.cells("a");
            menuAddCell.setText("abc");
	    var menuAddForm = menuAddCell.attachForm();
            var menuFormStructure=[{type:"button", name:"addMenuBtn",offsetTop:15,offsetLeft:100, value:"ADD"}];
	    menuAddForm.loadStruct(menuFormStructure);
	    menuAddForm.attachEvent("onFocus", function(name){
                if(name == "addMenuBtn"){
                    var dhxWins= new dhtmlXWindows();
                    var win = dhxWins.createWindow("mywindow", 500, 105, 360, 220);
                    dhxWins.window("mywindow").setText("please select");
                    dhxWins.window("mywindow").center();
                    var str = [
                        { type:"button" , name:"okBtn", value:"OK", inputLeft:90, inputTop:130, position:"absolute"  },
                        { type:"button" , name:"cancelBtn", value:"CANCLE", inputLeft:180, inputTop:18,style:"backgroundColor:red"  }
                    ];
                    var form = win.attachForm(str,true);
                    return true;
                }
            });
        }
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>
#3

While I debug the page,I find that ,the css style 'dhxform_obj_dhx_web div.dhxform_btn ’ properties “background-color” belongs to the button dosen’t take effect, but it can take affect to the “Add” button,which binded an event to generate the dhtmlxWindow.

btns.png1022×570 40.1 KB

#4

Here is my test demo.Is there any one can help me?
Thanks~
TestButton-IE8_dhxv46.zip (311 KB)

#5

Please, try to add a valid doctype on your page.

#6

Thanks for replay!
I have tried the doctype like these

, ,

but they dosen’t take effect.