Element created by JavaScript not being formated by CSS file

Question

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?

* UDPATE*

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?

<script>
             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 < 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 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select);
                }
             }
        </script>

the coresponding CSS file section is shown below

body
 {
    padding: 0;
     margin: 0;
background-color:#d0e4fe;
font-size: 2em;
      font-family: monospace;
      font-weight: bold;
  }

and

.menu_container
{
   position: relative;
    margin: 0 auto;
 }
.menu_element
{ 
float: right;
width: 33%;
}

maybe a stupid question - but have you tried to inspect that bit of generated code via firebug/chrome to check if the desired classes are being applied etc. ? — Zathrus Writer
– Zathrus Writer, Commented Oct 8, 2013 at 15:53
IE9 has developer tools just like chrome or firefox. Have you tried to inspect the DOM via IE9 to check if the desired classes are being applied? — slebetman
– slebetman, Commented Oct 8, 2013 at 21:25

JAL · Accepted Answer · 2013-10-08 20:57:44Z

2

I believe you need to insert plant_select into the dom.

So before you execute processCSV, do something like

var body_elem=document.getElementsByTagName('body')[0];
body_elem.appendChild(plant_select);

varying the first line (which element to append to) depending on where exactly you want your menu. See https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild for info on creation and insertion of document elements, also see insertBefore.

I don't see where you're putting the options into the document either, actually.

Also this may help, since you're in IE especially - rather than plant_select.setAttribute("class", "selectbox"); plant_select.setAttribute("id", "plant_select");

Try

     plant_select.className="selectbox";   
     plant_select.id="plant_select";

IE in particular has had issues with improperly choosing to map attributes to properties. Setting the id and class this way is more reliable than setAttribute.

edited Oct 8, 2013 at 20:57

answered Oct 8, 2013 at 15:59

JAL

21.6k1 gold badge50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheCodeNovice Over a year ago

I append the document fragment to parent_select which is an HTML select object. That should work correct? Also what do you mean by inserting into the DOM. I created it, do I need to append to the div element for it to take ?

Collin Grady Over a year ago

You have to append it to something, yes, or else it exists purely in JS and will never appear anywhere at all.

slebetman Over a year ago

@TheCodeNovice: I don't see parent_select anywhere in your code. I do see plant_select which is created but not inserted anywhere into the page (DOM). You need to insert or append or prepend it to something in your page even if it's just document.body.

TheCodeNovice Over a year ago

@JAL, now I have to select elements per my update. How do I fix ?

JAL Over a year ago

@TheCodeNovice you don't need to create the document fragment. Adding option children to it is creating a select, I believe. Append the options directly into the select element.

|

Collectives™ on Stack Overflow

Element created by JavaScript not being formated by CSS file

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related