CODEWITHSUNDEEP
javascripthtmlcss
CodySDEV
CodySDEV

Reputation: 83

Dropdown menu not overlapping lower elements

I understand that this is a duplicate question. However, I have been messing around with the CSS for hours and cannot seem to get this right. My drop-down menus will not overlap and I believe that I have messed around so much that I have genuinely confused myself. Any help would be much appreciated!

** Note, the drop-down menu's are 'displacing' the other content & not underlaying as suggested by the comment mentioning "Z-index".

Possibly due to using display:Block & inline-block.

Here is a snippet...

HTML

<!DOCTYPE html>
  <html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
 <body>
    <h3>Select times you will be in your office:</h3>

  <p class="daysOfTheWeek"><b><u>Monday</u></b></p>
  <div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon1" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;'
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;'
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon3" onmousedown="if(this.options.length>8)  
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon4" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon5" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon6" onmousedown="if(this.options.length>8
                                {this.size=8;}" onchange='this.size=0;'   
                                onblur="this.size=0;"></select>
  </div>

<p class="daysOfTheWeek"><b><u>Tuesday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue1" onmousedown="if(this.options.length>8)     
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue2" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue3" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue4" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue5" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue6" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Wednesday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed1" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed2" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed3" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed4" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;"></select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed5" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed6" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Thursday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur1" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur2" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur3" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur4" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur5" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur6" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Friday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri1" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri3" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri4" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri5" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri6" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Saturday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat1" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat3" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat4" onmousedown="if(this.options.length>8)  
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat5" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;"></select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat6" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
<h3 class="review">Review Changes</h3>
      <br>
<input id="clickMe" type="button" value="Review Changes"   
       onclick="reviewFunc();"/>
<br>
<br>
<p><b><u>Monday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText1" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText2" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText3" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText4" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText5" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText6" class="ey" style="color:red"></p>
</div>

<p><b><u>Tuesday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText21" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText22" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText23" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText24" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText25" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText26" class="ey" style="color:red"></p>
</div>

<p><b><u>Wednesday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText31" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText32" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText33" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText34" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText35" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText36" class="ey" style="color:red"></p>
</div>

</body>

<script src="editSchedule.js"></script>

</html>

JavaScript

//Array of Office hours

TIMES = ["Select", "OUT", "8:00A", "8:30A", "9:00A", "9:30A", "10:00A", "10:30A", 
             "11:00A", "11:30A", "12:00P", "12:30P", "1:00P", "1:30P", "2:00P",  
             "2:30P", "3:00P", "3:30P", "4:00P", "4:30P", "5:00P", "5:30P", "6:00P"];

// TODO : create loop to create objects to simplify code
// function main() {
//     // Adding TIMES array to dropdown DOM
//
//     var sel = document.getElementById('TimeListMon1');
//
//     for (var i = 0; i < TIMES.length; i++) {
//         var opt = document.createElement('option');
//         opt.innerHTML = TIMES[i];
//         opt.value = TIMES[i];
//         sel.appendChild(opt);
//     }
// }



//Function to pull selected values from dropdown menu for Days of week
function reviewFunc(){
    // Pull selected values for Monday
    var i = 1;
    while (i <= 6) {
        var dropDownValue = document.getElementById("TimeListMon" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText" + i).innerHTML = selected;
        i++;
    }
    // Pull selected values for Tuesday
    i = 1;
    while (i <= 6){
        var dropDownValue = document.getElementById("TimeListTue" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText2" + i).innerHTML = selected;
        i++;

    }
    //Pull selected values for Wednesday
    i = 1;
    while (i <= 6){
        var dropDownValue = document.getElementById("TimeListWed" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText3" + i).innerHTML = selected;
        i++;

    }
}










// Adding TIMES array to dropdown DOM

var sel = document.getElementById('TimeListMon1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}
var sel = document.getElementById('TimeListMon6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListTue4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListWed1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListThur1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListSat1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}
var sel = document.getElementById('TimeListSat5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

CSS

.ey
{
    display:inline-block;
}

p.spaceRed
{
    display:inline-block;
    color: red;
}
form{
    position: relative;
    display:inline-block;
}

div.diffTimes {
    display:block;

}
div.reviewTimes {
    display: inline-block;
}
p.daysOfTheWeek {
    text-decoration: underline;
    font-weight: bold;
    position:relative;
    overflow:hidden;

}

Upvotes: 3

Views: 1295

Answers (3)

StackSlave
StackSlave

Reputation: 10627

Here is an example that later you can migrate to mobile. It just shows some coding practices.

var doc, get, post, M, I, special, unspecial, createDropdown; // for use on other loads
addEventListener('load', function(){ // make sure DOM is loaded
doc = document;
get = function(url, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('GET', url);
  x.onload = function(){
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(send, url, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('POST', url); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onload = function(){
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(typeof FormData !== 'undefined' && send instanceof FormData){
      x.send(send);
    }
    else{
      var s, r = [];
      for(var p in send){
        s = send[p];
        if(typeof s === 'object')s = JSON.stringify(s);
        r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
      }
      x.send(r.join('&'));
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
special = function(str){ // for use with .innerHTML not .value or .text
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
createDropdown = function(selectId, dropdownArray, appendToElement, selectOnchangeFunc){
  var sel = M('select'); sel.id = selectId;
  for(var i=0,opt,l=dropdownArray.length; i<l; i++){
    opt = M('option'); opt.text = opt.value = dropdownArray[i]; sel.add(opt);
  }
  sel.onchange = selectOnchangeFunc; appendToElement.appendChild(sel);
}
var times = ['OUT', '8:00A', '8:30A', '9:00A', '9:30A', '10:00A', '10:30A', '11:00A', '11:30A', '12:00P', '12:30P', '1:00P', '1:30P', '2:00P', '2:30P', '3:00P', '3:30P', '4:00P', '4:30P', '5:00P', '5:30P', '6:00P'];
var selectIds = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], weekday_times = I('weekday_times'), dropdownData = {}, output = I('output');
function selectChange(){
  dropdownData[this.id] = this.value; output.innerHTML = special(JSON.stringify(dropdownData));
}
for(var i=0,si,l=selectIds.length; i<l; i++){
  si = selectIds[i]; dropdownData[si] = 'OUT';
  createDropdown(si, times, weekday_times, selectChange);
}
output.innerHTML = special(JSON.stringify(dropdownData));
I('content').style.display = 'block';
});// end load
//]]>
*{
  padding:0; margin:0; box-sizing:border-box; overflow:hidden;
}
html,body{
  width:100%; height:100%; background:#aaa; color:#000;
}
body{
  position:relative; font:22px Tahoma, Geneva, sans-serif;
}
body>*{
  position:absolute;
}
#content{
  display:none; width:100%; height:100%; 
}
.page{
  position:relative; width:100%; height:100%; float:left;
}
.bar{
   width:100%; height:38px; padding:3px; background:#ccc; color:#000;
}
h1{
  font-size:28px; margin-left:3px;
}
.weekday{
  display:flex;
}
.weekday>*{
  flex:1; text-align:center; border:1px solid #000;
}
#overlap,#output{
  margin:10px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <div class='page'>
      <div class='bar'><h1>Select times you will be in your office:</h1></div>
      <div class='main'>
        <div class='weekday'><label for='sun'>Sunday</label><label for='mon'>Monday</label><label for='tue'>Tuesday</label><label for='wed'>Wednesday</label><label for='thu'>Thursday</label><label for='fri'>Friday</label><label for='sat'>Saturday</label></div>
        <div class='weekday' id='weekday_times'></div>
        <div id='overlap'>dropdownData Looks Like:</div>
        <div id='output'></div>
      </div>
    </div>
  </div>
</body>
</html>

The CSS for the data would be different if you were displaying it. You can loop over the dropdownData Object assigning it to FormData as the link suggests, for use with XHR2.

Upvotes: 0

RoboYak
RoboYak

Reputation: 1482

A drop down consists of two elements. The button, and the drop down that contains the items. The button is clicked which shows the hidden drop down. The drop down needs to be absolutely positioned to not push around other elements. Normally to achieve a shorter DD you would just alter the height of the DD, but since it is not accessible for styling, here you have to make the entire select element absolute. This means that your parent relative element must have a fixed width. You will notice it is set at 200px. Which this is not ideal. Say you have a DD that is bigger than 200px? Well now you need JS to set your parent width property dynamically. If they would have allowed the DD to be stylized, all this could be easily avoided.

FIDDLE: https://jsfiddle.net/gysxfz3e/4/

  1. Wrap your select in a parent element to apply relative positioning to:

    <div class="parentSelect">
    <select id="TimeListMon2" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;"></select>
</div>

  2. Create CSS for your parent and select elements:

    div.parentSelect{
  position: relative;
  width: 200px;
  display: inline-block;
  height: 15px;
}

div.parentSelect select{
  position: absolute;
}

Upvotes: 1

Jaffer Abyan Syed
Jaffer Abyan Syed

Reputation: 129

in your css you just need to do the z-index: 99; within the navigation bar component and that should fix your overlap problem

Upvotes: 0

Related Questions