Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Width

How Do I Get My Styled Select Menu To Be 100% Width Of The Parent Container In Chrome?

Post a Comment
I'm creating a form with a text box and a styled select menu (essentially a DIV with other DIVs within it). I would like both items to be the same width, preferably not a fixed p

Solution 1:

First of all, setting margin in percentages is not a good idea when the width of the container depends on the content (which is the case here). Using pixels might be a better idea.

Remember that percentage margin on a container is calculated based on its width:

The size of the margin as a percentage, relative to the width of the containing block. (MDN)

Why?

Looks like Chrome has issues when margin is given in percentages inside an inline-block container, while firefox has no such issues.

Possible solution

See demo below where margin: 4% 15% is replaced with margin: 20px:

$(function() {

  $('select').each(function() {
    styleSelectMenu($(this));
  });

});

// This method applies the styles to our select menufunctionstyleSelectMenu(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 = "100%"; // $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').();
    });
    $this.wrap($wrapper);
  } // if/*** NEW - end ***/if (!$this.next().hasClass('select-styled')) {
    $this.after('<div class="select-styled"></div>');
  } // ifvar $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();
  } // ifvar $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').();
    });
    $(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.();
  }); */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);
  } // ifvar 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;
    } // ifvar nextElement;
    switch (event.keyCode) {
      // case upcase38:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
        break;
        // case down case40:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
        break;
        // case <ENTER>case13:
        var currentElement = $(this).find(".select-options li.selected");
        $(currentElement).click();
        break;
        // case escape case27:
        $(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')) {
      returnfalse;
    }
    if (event.keyCode) {
      keyUps += event.key;
      retrieveFromOptions($selectOptions, keyUps);
    }
    clearTimeout(timeOut);
    timeOut = setTimeout(function() {
      keyUps = "";
    }, 250);
    //var currentElement = $(this).find(".select-options li.selected");//var val = String.fromCharCode(event.keyCode);//retrieveFromOptions($(this).find('ul'),val); 
  });

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

}

// This is the method that will select an item from the styled listfunctionselectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide) {
  $(styledSelect).text(selectedText).removeClass('active');
  //var selectedVal = $(selectMenu).attr('rel'); //$(selectMenu).val(selectedVal);

  $(listToHide).();
  // Select option in the underlying list so that the form gets submitted// with the right values
  $(selectMenu).find("option[selected='selected']").removeAttr("selected");
  $(selectMenu).find('option').filter(function() {
    return $(this).html() == selectedText;
  }).prop('selected', true)
  // Trigger an on change event 
  $(selectMenu).trigger("change");
} // selectItemFromStyledList// Called when someone clicks an item from the styled list// The event data should contain the following parameters://      styledSelect - the <div> element that contains the styled menu//      selectMenu - the actual form element that contains the items//      listItemClicked - the item that was clicked.//      list - THe <UL> element containig the <li> optionsfunctionclickListItem(event, styledSelect, selectMenu, listItemClicked, list) {
  var $styledSelect = $(styledSelect);
  var $selectMenu = $(selectMenu);
  var $listItem = $(listItemClicked);
  var $list = $(list);

  event.stopPropagation();
  var selectedText = $listItem.text();
  selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
} // clickListItem  // Given a keystroke (val), this selects an option functionretrieveFromOptions($options, val) {
  $options.find('li').each(function(index) {
    if (this.textContent.substring(0, val.length).toLowerCase() === val.toLowerCase()) {
      $(this).parent().find(".select-options li").removeClass("selected");
      $(this).addClass("selected");
      this.scrollIntoView(false);
      //$options.scrollTop($(this).height()*index);returnfalse;
    }
  });
}
body {
  background-color: #e0e0e0;
}

form {
  /*margin: 4% 15%;*/margin: 20px;
  font-family: Manuelle;
  font-size: 14px;
}


/* line 20, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */header {
  background-color: #4180C5;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 8px;
  margin-top: -11px;
  margin-bottom: -8px;
  border-radius: 10px10px00;
  color: aliceblue;
}


/* line 31, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */.field {
  padding-top: 10px;
}


/* Makes responsive fields.Sets size and field alignment.*//* line 36, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  /*  added property  */
}


/* line 45, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */.buttonContainer {
  text-align: center;
}


/* line 49, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */input[type=submit] {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  font-size: 15px;
  cursor: pointer;
}


/* line 60, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */#submit:hover {
  background-color: black;
}


/* line 64, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */textarea {
  width: 100%;
  padding: 15px;
  margin-top: 10px;
  border: 1px solid #7ac9b7;
  border-radius: 5px;
  margin-bottom: 20px;
  resize: none;
}


/* line 73, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

#userNotificationsWrapper {
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
  font-family: Acme;
  font-size: 18px;
  padding-left: 10px;
}


/* line 16, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */h2 {
  font-size: 18px;
  font-family: Manuelle;
  text-align: center;
}

@media (max-width: 1200px) {
  /* line 23, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTableWrapper {
    width: 100%;
  }
}


/* line 28, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTable {
  width: 100%;
}


/* line 32, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTabletr {
  text-align: left;
  min-height: 30px;
}


/* line 37, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTablethead {
  background-color: grey;
  color: #fff;
}


/* line 42, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTabletrth {
  font-weight: bold;
}


/* line 46, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-rowimg,
.currency-row.name {
  vertical-align: middle;
}


/* line 50, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-row {
  border-bottom: 1px solid #C7CDD1;
}


/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-rowimg,
.currency-row.name {
  vertical-align: middle;
}


/* line 58, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-rowtd {
  padding: 12px012px0;
}


/* line 62, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTableth {
  padding: 12px012px0;
}


/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationsTableth:first-child {
  padding-left: 10px;
}


/* line 70, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-rowtd:first-child {
  padding-left: 10px;
}


/*
.currency-row td:last-child {
    padding-right:5px;
}
*//* line 79, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.currency-title {
  white-space: nowrap;
}


/* line 84, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
  display: inline-block;
}


/* line 94, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.arrow-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f00;
  vertical-align: middle;
  display: inline-block;
}


/* line 104, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#createBtn {
  margin-bottom: 20px;
  padding: 15px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}


/* line 117, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#createBtn:hover {
  background-color: black;
}


/* line 121, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */.buttonCreate {
  width: 30%;
  margin: 10px auto;
  display: block;
}


/* line 127, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */#userNotificationForm {
  background-color: #fff;
  display: inline-block;
  text-align: left;
}

@import url("http://fonts.googleapis.com/css?family=Lato");

/* line 11, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}


/* line 18, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}


/* line 24, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
  margin-bottom: 20px;
  margin-top: 10px;
}


/* line 35, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px12px;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}


/* line 44, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}


/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-styled:hover {
  background-color: #7b7b7b;
}


/* line 57, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-styled:active,
.select-styled.active {
  background-color: #737373;
}


/* line 59, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-styled:active:after,
.select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}


/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.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;
}


/* line 81, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-optionsli {
  margin: 0;
  padding: 12px0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}


/* line 90, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-optionsli.selected {
  color: gray;
  background: #fff;
}


/* line 95, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */.select-optionsli[] {
  display: none;
}


/* line 99, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="content"><divid="userNotificationForm"><formclass="new_user_notification"id="new_user_notification"action="/user_notifications"accept-charset="UTF-8"method="post"><inputname="utf8"type="hidden"value="&#x2713;" /><inputtype="hidden"name="authenticity_token"value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" /><divclass="field"><labelfor="user_notification_price">Label</label><spanclass="required">*</span><br><inputsize="30"type="text"name="user_notification[price]"id="user_notification_price" /></div><divclass="field"><labelfor="user_notification_buy">Condition</label><spanclass="required">*</span><br><selectname="user_notification[buy]"id="user_notification_buy"><optionvalue="">Select Notification Time</option><optionvalue="false">Above</option><optionvalue="true">Below</option></select><pclass='error'></p></div><divclass="actions buttonContainer"><inputtype="submit"name="commit"value="Submit"id="submit"class="button btn"data-disable-with="Submit" /></div></form></div></div>

Solution 2:

Try this:

#userNotificationForm{
    width: 50%; //change this to the width you want for the form
 }

#user_notification_price{
    width: 100%;
 }

#user_notification_buy{
   width: 100%;
}

Hope this helps for you.

Solution 3:

You can just use the select selector in css like so.

input[type=text],
select {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  width: 100%;
  /*  added property  */
}

Solution 4:

Try removing the line margin: 4% 15%; in the form style (line 40) and adding padding: 4% 15%; to the style for #userNotificationForm if you want padding.

enter image description here

Solution 5: 

form {
  margin: 4%15%;
  font-family: Manuelle;
  font-size: 14px;
  width:70%;
}


input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  width:100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  /*  added property  */
}

Add width:70% with form tag and width:100% with input[type=text].

Post a Comment for "How Do I Get My Styled Select Menu To Be 100% Width Of The Parent Container In Chrome?"