I have this simple select dropdown and after I select it once, it freezes! However, if I remove the label of the next control (textbox) it works! Bizarre. How can the select work with the label of the textbox? Thank you.
HTML select freezes:
<script src="http://js.arcgis.com/3.14/"></script> <script src="js/select.js"></script> </head> <body bgcolor="blue" class="claro"> <div style="margin-top: 40px"> <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label> <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" > </select> <br /> <label data-dojo-attach-point="identifyFromLbl" id="lbl_desc" style="width:25%; padding-top:40px;margin-bottom:10px;margin-right:10px; margin-left: 40px; margin-top: 20px; font-size: 1.25em; color:white;vertical-align: middle ">Enter a Project Description (optional): </label> <input type="text" style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="proj_desc" /> <div> </div> </div> </body>
HTML select works:
<script src="http://js.arcgis.com/3.14/"></script> <script src="js/select.js"></script> </head> <body bgcolor="blue" class="claro"> <div style="margin-top: 40px"> <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label> <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" > </select> <br /> <input type="text" style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="proj_desc" /> <div> </div> </div> </body>
js:
require([ "dojo/ready", "dojo/on", "dojo/_base/connect", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "esri/domUtils", 'dijit/_WidgetsInTemplateMixin', "dijit/Menu", "dijit/MenuItem",'dijit/form/Select', "dojo/domReady!"], function( ready, on, connect, dom, registry, domConstruct, parser, domUtils, _WidgetsInTemplateMixin, Menu, MenuItem, Select ){ parser.parse(); setup_subject(); }); function setup_subject(){ dijit.registry.byId("subject").options.length = 0; subjectlist= []; subjectlist.push({label:"General Environmental", value: 0}); subjectlist.push({label:"Biology", value: 1}); subjectlist.push({label:"Haz Waste", value: 2}); subjectlist.push({label:"Air/Noise", value: 3}); subjectlist.push({label:"Water", value: 4}); dijit.registry.byId("subject").addOption({label:"Select Subject Area", value: 0}); dijit.registry.byId("subject").addOption(subjectlist); }
Solved! Go to Solution.
Lefteris,
Here is your code fixed and cleaned.
Things to consider:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>something</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <script src="http://js.arcgis.com/3.16/"></script> <!--<script src="js/select.js"></script>--> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: blue; } .subject-label { width: 25%; margin-top: 20px; margin-bottom: 10px; margin-right: 10px; margin-left: 40px; font-size: 1.25em; color: white } .subject-select { margin-top: 20px; margin-bottom: 10px; } .desc-label { width: 25%; padding-top: 40px; margin-bottom: 10px; margin-right: 10px; margin-left: 40px; margin-top: 20px; font-size: 1.25em; color: white; vertical-align: middle; } .projectDesc-input { margin-top: 20px; width: 30em; vertical-align: middle; } .main-div { margin-top: 40px } </style> <script> require([ "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "esri/domUtils", "dijit/Menu", "dijit/MenuItem", "dijit/form/Select", "dojo/domReady!" ], function ( on, dom, registry, domConstruct, parser, domUtils, Menu, MenuItem, Select ) { parser.parse(); setup_subject(); function setup_subject() { dijit.registry.byId("subject").options.length = 0; subjectlist = []; subjectlist.push({ label: "General Environmental", value: 0 }); subjectlist.push({ label: "Biology", value: 1 }); subjectlist.push({ label: "Haz Waste", value: 2 }); subjectlist.push({ label: "Air/Noise", value: 3 }); subjectlist.push({ label: "Water", value: 4 }); dijit.registry.byId("subject").addOption({ label: "Select Subject Area", value: 0 }); dijit.registry.byId("subject").addOption(subjectlist); } }); </script> </head> <body class="claro"> <div class="main-div"> <label id="lbl_subject" class="subject-label">Select a Subject Area </label> <select id="subject" class="subject-select" data-dojo-type="dijit/form/Select"></select> <br /> <label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label> <input id="proj_desc" type="text" class="projectDesc-input" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" /> <div></div> </div> </body> </html>
Lefteris,
Here is your code fixed and cleaned.
Things to consider:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>something</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <script src="http://js.arcgis.com/3.16/"></script> <!--<script src="js/select.js"></script>--> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: blue; } .subject-label { width: 25%; margin-top: 20px; margin-bottom: 10px; margin-right: 10px; margin-left: 40px; font-size: 1.25em; color: white } .subject-select { margin-top: 20px; margin-bottom: 10px; } .desc-label { width: 25%; padding-top: 40px; margin-bottom: 10px; margin-right: 10px; margin-left: 40px; margin-top: 20px; font-size: 1.25em; color: white; vertical-align: middle; } .projectDesc-input { margin-top: 20px; width: 30em; vertical-align: middle; } .main-div { margin-top: 40px } </style> <script> require([ "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "esri/domUtils", "dijit/Menu", "dijit/MenuItem", "dijit/form/Select", "dojo/domReady!" ], function ( on, dom, registry, domConstruct, parser, domUtils, Menu, MenuItem, Select ) { parser.parse(); setup_subject(); function setup_subject() { dijit.registry.byId("subject").options.length = 0; subjectlist = []; subjectlist.push({ label: "General Environmental", value: 0 }); subjectlist.push({ label: "Biology", value: 1 }); subjectlist.push({ label: "Haz Waste", value: 2 }); subjectlist.push({ label: "Air/Noise", value: 3 }); subjectlist.push({ label: "Water", value: 4 }); dijit.registry.byId("subject").addOption({ label: "Select Subject Area", value: 0 }); dijit.registry.byId("subject").addOption(subjectlist); } }); </script> </head> <body class="claro"> <div class="main-div"> <label id="lbl_subject" class="subject-label">Select a Subject Area </label> <select id="subject" class="subject-select" data-dojo-type="dijit/form/Select"></select> <br /> <label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label> <input id="proj_desc" type="text" class="projectDesc-input" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" /> <div></div> </div> </body> </html>
Thank you Robert. The code I posted is actually a part of a much larger file. I removed chunks of code so I can post the issue I have.
The code you posted has the same issue as the one I encounter. After you click once in the select control, you cannot make anoher selection. It just freezes. So, I started thinking, perhaps it is a browser issue. It turned out that it is!! Chrome and MS Edge has this issue. Firefox (version 30.0) doesn't! So, the question is how to make this simple code compatible with all browsers.
Edit: 3/13/16
It seems that you can use the select the control without problems by using the keyboard only.
Like I stated in a previous posting, the issue does not exist, if I remove the:
<label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label>
Why???
Lefteris,
All my previous suggestions still apply whether this was just a portion of your code or not.
The style positioning was causing you a problem.
I also added a form element and added the "for" property for your labels and adjusted the css.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Create web map from id</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <script src="http://js.arcgis.com/3.16/"></script> <!--<script src="js/select.js"></script>--> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: blue; } .desc-label, .subject-label{ width: 25%; font-size: 1.25em; color: white; vertical-align: middle; margin-right: 5px; } .projectDesc-input { width: 30em; vertical-align: middle; } .main-div { margin-top: 40px } .row { margin: 10px 10px; } </style> <script> require([ "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "esri/domUtils", "dijit/Menu", "dijit/MenuItem", "dijit/form/Select", "dojo/domReady!" ], function ( on, dom, registry, domConstruct, parser, domUtils, Menu, MenuItem, Select ) { parser.parse(); setup_subject(); function setup_subject() { dijit.registry.byId("subject").options.length = 0; subjectlist = []; subjectlist.push({ label: "General Environmental", value: 0 }); subjectlist.push({ label: "Biology", value: 1 }); subjectlist.push({ label: "Haz Waste", value: 2 }); subjectlist.push({ label: "Air/Noise", value: 3 }); subjectlist.push({ label: "Water", value: 4 }); dijit.registry.byId("subject").addOption({ label: "Select Subject Area", value: 0 }); dijit.registry.byId("subject").addOption(subjectlist); } }); </script> </head> <body class="claro"> <form class="main-div"> <div class="row"> <label for="subject" id="lbl_subject" class="subject-label" >Select a Subject Area:</label> <select id="subject" data-dojo-type="dijit/form/Select"></select> </div> <div class="row"> <label for="proj_desc" class="desc-label">Enter a Project Description (optional):</label> <input id="proj_desc" type="text" class="projectDesc-input" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true"> </div> <div></div> </form> </body> </html>