Search code examples
dhtmlx

dhtmlx buttons with plus and minus png images are not working in IE11 browser in window 10

I created dhtmlx layout and attached dhtmlxform on that.There are 4 directions buttons and 3 - plus ,minus, refresh buttons added on that form.It is working as shown in screenshot but plus and minus sign buttons are not working as shown in another screenshot in IE11 windows 10. What is the solution to this issue?

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

            <!DOCTYPE html>
            <html>

            <head>
                <title>Object-based 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="javascript\dhtmlx\dhtmlx_pro_full/dhtmlx.css"/>
                <script src="javascript\dhtmlx\dhtmlx_pro_full/dhtmlx.js"></script>


                <style>


                    html,body { 
                        overflow: hidden;
                        height:100%;
                        min-height: 100%;
                        margin-top: 0px;
                    }

                    object {
                        height:100%
                    }

                    table {
                        margin: 0px;
                    }



                    div.dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input {
                        margin: 4px 4px;
                        padding: 4px 2px 3px 2px;
                    }

                    div.dhxform_obj_material div.dhxform_item_absolute div.dhxform_btn{
                        height:24px;
                        width:24px;
                        border: thin solid ligthgray;
                        border-radius: 3px;
                        text-align: center;
                    }


                    .dhtmlx_message_area {
                         left:35%;
                         margin-top:200px;
                    }
                </style>
            </head>
            <body>
                        <div id="mainScreen" style="height:100%;width:100%;position:absolute;" >
                            <svg id="diagramLayout" style="height:100%;width:100%;position:absolute;">
                            </svg>
                            <div id="sample">
                            <div id="objId1" style="height: 100%"></div>
                            </div>
                        </div>
                        <div id="hidden" style="display:none;"><canvas id='canvas' ></canvas></div>

                        <div id="objId" style="width:100px; height:30px;position:relative;"></div>


                        <script>

                            var graphCell;


                            graphLayout = new dhtmlXLayoutObject("mainScreen", "1C");

                            graphCell = graphLayout.cells('a');

                            loadForm();
                            function loadForm(){
                                navigationString = [
                                    { type:"button" , name:"up", value:"<img src='images/icons/up-arrow.png' style='position:absolute;width:15px;height:15px;left:4px;top:4px'>", width:"24", height: 24,  inputLeft:36, inputTop:-118+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"down", value:"<img src='images/icons/down-arrow.png' style='position:absolute;width:14px;height:14px;left:4px;top:6px'>", width:"24", inputLeft:36, inputTop:-60+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"left", value:"<img src='images/icons/left-arrow.png' style='position:absolute;width:14px;height:14px;left:3px;top:5px'>", width:"24", inputLeft:10, inputTop:-89+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"right", value:"<img src='images/icons/right-arrow.png' style='position:absolute;width:14px;height:14px;left:5px;top:5px'>", width:"24", inputLeft:61, inputTop:-89+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"add", value:"<img src='images/icons/add.png' style='position:absolute;width:10px;height:10px;top:6px;left:6px'> <span style='margin-left:13px;'></span>",height:"5", width:"24", inputLeft:99, inputTop:-118+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"refresh", value:"<img src='images/icons/refresh.png' style='position:absolute;width:11px;height:11px;top:6px;left:5px'> <span style='margin-left:13px;'></span>", width:"24", inputLeft:99, inputTop:-89+window.innerHeight, position:"absolute"  },
                                    { type:"button" , name:"substract", value:"<img src='images/icons/substract.png' style='position:absolute;width:10px;height:10px;top:6px;left:5px'> <span style='margin-left:13px;'></span>", width:"24", inputLeft:99, inputTop:-60+window.innerHeight, position:"absolute"  }
                                ];

                                navigationForm = new dhtmlXForm("objId", navigationString);
                                }

                        </script>
            </body>
            </html>
Solution

  • Looks like it has to do with sizes of img elements and png images and browser scaling of images. From what I see I looks like lines on your icons or disappears or become blurry when they are scaled out too much.

    You have 30x30px icons and 10px-14px img elements which loads these icons. Icons that disappears are loaded into the smallest img elements (10px width height), they become visible if you increase sizes of img elements from 10 to 11px, here is a demo: http://snippet.dhtmlx.com/0284599ed

    As a solution, I'd suggest to decide on the image sizes and prepare appropriate icons so browser won't need to scale them