Note that there are some explanatory texts on larger screens.

plurals
  1. POElement created by JavaScript not being formated by CSS file
    primarykey
    data
    text
    <p>I am making a select element using an embedded js script which is shown below. I do see that I have a select element on the page but the dropdown is blank. The default selection is not shown either. The reason why I think the CSS is not working is that the size is way off. I made a static select not from js and it is much larger. Any suggestions?</p> <p><strong>* UDPATE*</strong></p> <p>I appended the select element but now I have two. One which has the choices and is not affected by the CSS and one that is blank that is formatted properly by the CSS sheet. What gives?</p> <pre><code>&lt;script&gt; function processCSV(file,parentNode) { var frag = document.createDocumentFragment() , lines = file.split('\n'), option; var intial_option = document.createElement("option"); intial_option.setAttribute("value",""); intial_option.setAttribute("disabled","disabled"); intial_option.setAttribute("selected","selected"); intial_option.innerHTML = "Please select a Plant"; frag.appendChild(intial_option) for (var i = 0, len = lines.length; i &lt; len; i++){ option = document.createElement("option"); option.setAttribute("value", lines[i]); option.innerHTML = lines[i]; frag.appendChild(option); } parentNode.appendChild(frag); menuholder.appendChild(parentNode); } var plant_select = document.createElement("select"); var datafile = ''; var xmlhttp = new XMLHttpRequest(); plant_select.setAttribute("class", "selectbox"); plant_select.setAttribute("id", "plant_select"); xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if(xmlhttp.status==200 &amp;&amp; xmlhttp.readyState==4) { processCSV(xmlhttp.responseText, plant_select); } } &lt;/script&gt; </code></pre> <p>the coresponding CSS file section is shown below </p> <pre><code>body { padding: 0; margin: 0; background-color:#d0e4fe; font-size: 2em; font-family: monospace; font-weight: bold; } </code></pre> <p>and </p> <pre><code>.menu_container { position: relative; margin: 0 auto; } .menu_element { float: right; width: 33%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload