css - 如何控制select2 select标签的宽度

Question

使用 css 设置 select2 的宽度被 select2 的 javascript 调用覆盖

// javascript
$(function() {
  renderSelect("select");
});

# HAML example (Rails)
 = select_tag "countries", options_for_select(@countries), class: 'some-ignored-css-class'

相关：如何控制选择标签的宽度？

Answer 1

问题不在于 javascript，问题在于您没有保留 CSS。

设置宽度的唯一方法是使用 CSS。甚至您的 JS 也设置了 CSS ( .width)：

.css(width)和之间的区别在于.width()后者返回一个无单位的像素值（例如，400），而前者返回一个具有完整单位的值（例如，400px）。他们都设置了CSS“样式”元素

更好的方法是在“容器”元素上设置 CSS，或者确保在调用renderSelect函数时保留 CSS：

---

容器

#app/assets/stylesheets/application.css
.container select { width: 50px; }

#app/views...
.container= select_tag "countries", options_for_select(@countries)

使用容器将允许您在容器上设置 CSS ，从而消除对select自身的类的需要。虽然这意味着添加一个容器 div，但它会给你最大的自主权。

--

JS

另一种方法是更改renderSelect​​函数以获取当前的类select并将其附加到新元素。

由于我不知道你的renderSelect功能，我只能提供那个级别的建议。

Answer 2

一个解决方案是再次使用javascript

// javascript
$(function() {
  renderSelect("select");
  $("div#s2id_countries").width(300);
});

# HAML example (Rails)
 = select_tag "countries", options_for_select(@countries), class: 'some-ignored-css-class'

啊，Javascript，所有生活问题的原因和解决方案

（有什么改进吗？）