如何在Chrome中将样式选择菜单设置为父容器宽度的100％? [英] How do I get my styled select menu to be 100% width of the parent container in Chrome?

问题描述

我正在创建一个带有文本框和样式选择菜单的表单(本质上是一个DIV，其中包含其他DIV).我希望两个项目都具有相同的宽度，最好不是固定的像素宽度，而是100％的可用空间.我有

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 pixel width, but rather 100% of the available space. I have

  <div class="field">
    <label for="user_notification_price">Label</label> <span class="required">*</span> <br>
    <input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
  </div>

  <div class="field">
    <label for="user_notification_buy">Condition</label> <span class="required">*</span> <br>
    <select name="user_notification[buy]" id="user_notification_buy"><option value="">Select Notification Time</option>
<option value="false">Above</option>
<option value="true">Below</option></select> 
    <p class='error'></p>
  </div>

在其中我为文本框指定100％的宽度...

in which I specify 100% width for the text box ...

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

，然后为样式化的DIV菜单的宽度输入"100％"(通过jQuery完成).这在Firefox上效果很好- https://jsfiddle.net/yj3cdvfy/3/，但是在Chrome中，它看起来不太对齐.

and then "100%" for the width of the styled DIV menu (done through jQuery). This works great on Firefox -- https://jsfiddle.net/yj3cdvfy/3/ , but in Chrome its not looking so aligned.

请注意，样式选择菜单的文本会自动换行，并且文本框会超出父容器的边界.我以为Chrome应该是不错的浏览器！无论如何，我该怎么做才能使Chrome和Firefox中的功能相同?

Notice the text of the styled select menu is wrapping and the text box is exceeding the boundary of the parent container. I thought Chrome was supposed to be the good browser! Anyway, what do I need to do to get things working in Chrome the same way as in Firefox?

推荐答案

首先，当的> 取决于内容(此处就是这种情况).使用 pixels 可能是一个更好的主意.

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.

请记住:容器上的百分比margin是根据其width计算的:

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

相对于 包含块的宽度. ( MDN )

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

为什么?

当margin在容器内的百分比 中给出百分比时，Chrome似乎有问题，而firefox没有此类问题.

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

可能的解决方案

请参阅下面的演示，其中将margin: 4% 15%替换为margin: 20px:

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 menu
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 = "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').hide();
    });
    $this.wrap($wrapper);
  } // if

  /*** NEW - end ***/

  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);
    //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 list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide) {
  $(styledSelect).text(selectedText).removeClass('active');
  //var selectedVal = $(selectMenu).attr('rel'); 
  //$(selectMenu).val(selectedVal);

  $(listToHide).hide();
  // 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> options
function clickListItem(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 
function retrieveFromOptions($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);
      return false;
    }
  });
}

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: 10px 10px 0 0;
  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 */

#userNotificationsTable tr {
  text-align: left;
  min-height: 30px;
}


/* line 37, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable thead {
  background-color: grey;
  color: #fff;
}


/* line 42, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable tr th {
  font-weight: bold;
}


/* line 46, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row img,
.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-row img,
.currency-row .name {
  vertical-align: middle;
}


/* line 58, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row td {
  padding: 12px 0 12px 0;
}


/* line 62, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable th {
  padding: 12px 0 12px 0;
}


/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable th:first-child {
  padding-left: 10px;
}


/* line 70, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row td: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: 11px 12px;
  -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-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;
}


/* line 90, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

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


/* line 95, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-options li[rel="hide"] {
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="userNotificationForm">
    <form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" />

      <div class="field">
        <label for="user_notification_price">Label</label> <span class="required">*</span> <br>
        <input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
      </div>

      <div class="field">
        <label for="user_notification_buy">Condition</label> <span class="required">*</span> <br>
        <select name="user_notification[buy]" id="user_notification_buy"><option value="">Select Notification Time</option>
<option value="false">Above</option>
<option value="true">Below</option></select>
        <p class='error'></p>
      </div>

      <div class="actions buttonContainer">
        <input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
      </div>

    </form>
  </div>
</div>

这篇关于如何在Chrome中将样式选择菜单设置为父容器宽度的100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！