How do I make my custom select menu occupy the entire screen for small screen widths?

Question

I'm using jQuery 1.12. I have created a stylized select mneu (using ULs and LIs) by taking a regular SELECT menu, applying the below styles

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li.selected {
  color: gray;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}


ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

and using the JS

function styleSelectMenu(selectMenu)
{
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;

        /*** NEW - start ***/
        var $paddingCalculator = $('<div />', {
            'class' : "select-styled test"
    }).css({
            width : 0,
        visibility : "hidden"
    }).appendTo("body");
    $this.addClass('select-hidden');
    var paddingWidth = $paddingCalculator.outerWidth() + 10;
    $paddingCalculator.remove();

    var selectWidth = $this.outerWidth() + paddingWidth;
    var clickHandled = false;

    if ( !$this.parent().hasClass('select') ) {
            var $wrapper = $("<div />", {
                'class' : "select", 
            'tabIndex' : '1' 
        }).css({
                width   : selectWidth
        }).focus(function() {
        $(this).find('.select-styled').click(); 
    }).blur(function() {
        clickHandled = false;
            $(this).find(".select-options li").removeClass("selected");
        $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide(); 
    });
        $this.wrap( $wrapper );
    }   // if

    if ( !$this.next().hasClass('select-styled') ) {
        $this.after('<div class="select-styled"></div>');
    }    // if

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    if ( $styledSelect.parent().find('ul').length > 0 ) {
        $styledSelect.parent().find('ul').remove();
    }   // if
    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    // This is the event when someone opens the list
    $styledSelect.unbind('click')
    $styledSelect.click(function(e) {
    //if(clickHandled) {  
        //    clickHandled = false; 
        //} else {
            clickHandled = true;
            e.stopPropagation();
            $('div.select-styled.active').each(function(){
                $(this).removeClass('active').next('ul.select-options').hide();
            });
            $(this).toggleClass('active').next('ul.select-options').toggle();
            var selectedIndex = $(this).parent().find('select option:selected').index();         
            selectedElement = $(this).parent().find(".select-options li")[selectedIndex];
            $(selectedElement).addClass("selected"); 
            selectedElement.scrollIntoView(false); 
        //} // if 
    });

    // This is the event when someone actually selects something from the list
    $listItems.unbind('click.selectStyledItem')
    $listItems.bind('click.selectStyledItem', function(event) {
         clickListItem(event, $styledSelect, $this, $(this), $list);
    });

    $(document).click(function(event) {
        $styledSelect.removeClass('active');
        $list.hide();
    });

    var selectedIndex = $this[0].selectedIndex;
    if (selectedIndex > 0) {
        var name = $this.attr("name")
        var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
        selectItemFromStyledList($styledSelect, $this, selectedText, $list);
    }   // if

    var parent = $this.parent()
    $(parent).bind('keydown', function(event) {
        var currentElement = $(this).find(".select-options li.selected");
        if (currentElement.length == 0) {
            currentElement = $(this).find(".select-options li")[0];
            $(currentElement).addClass("selected");
            return;
        }       // if
        var nextElement;
        switch(event.keyCode){
        // case up
        case 38:
            nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
            break;
    // case down 
        case 40:
            nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
            break;
    // case <ENTER>
        case 13:
            var currentElement = $(this).find(".select-options li.selected");
            $(currentElement).click(); 
            break;
    // case escape 
    case 27:
        $(this).blur(); 
        }
        $(this).find(".select-options li").removeClass("selected");
        if(nextElement) {
            $(nextElement).addClass("selected");
        nextElement.scrollIntoView(false); 
        }
    });

    var keyUps = "", timeOut, $selectOptions = $('.select-options'); 
    $(parent).bind('keyup', function(event) {
    if(!$selectOptions.prev().hasClass('active')){
            return false;
    }
    if(event.keyCode){
        keyUps += event.key;
        retrieveFromOptions($selectOptions,keyUps);
    }
    clearTimeout(timeOut);
    timeOut = setTimeout(function(){
        keyUps = "";
    },250); 
    });

    $listItems.hover(
    function(e) {
        $(this).addClass("selected");
    },
    function(e) {
        $(this).closest(".select-options").find("li.selected").removeClass("selected");
    }
    );

}

This is a Fiddle that illustrates here . my question is, for mobile browsers (e.g. screen width <= 500), how do I make my customized menu occupy the entire screen when someone clicks on it -- that is, the first element would appear at coordinates zero, zero and the width of each LI element would occupy the entire width of the screen? I'm basically tryihng to simulate how a regular SELECT menu behaves on a mobile phone.

Answer 1

Use this CSS:

@media only screen and (max-width:501px) {
  .active,
  .active + ul {
    width:100vw;
    height: 100vh;
    max-height: initial;
    position: fixed;
    top:0;
    left:0;
  }
}

Old JSfiddle

Update: Try this JSfiddle. Okay, it's a little hard to read your code, but I think that line 35 is the culprit.