Dojo CheckedMultiSelect文本换行和水平滚动 [英] Dojo CheckedMultiSelect text wrap and horizontal scrolling

问题描述

如何使DOJO CheckedMultiSelect文本包装，以及如何在同一个控件中启用水平滚动，如果选择文本大于控件大小

How to make DOJO CheckedMultiSelect text wrapped and how to enable horizontal scrolling in the same control, if the select text is larger that the control size

推荐答案

所有你需要的是覆盖CSS规则。请参阅jsFiddle的工作示例： http://jsfiddle.net/phusick/qrSWu/

All you need is to overwrite CSS rules. See working example at jsFiddle: http://jsfiddle.net/phusick/qrSWu/

对于您需要的，您需要限制宽度 dojox /形式/ CheckedMultiSelect 。可以将 narrow class添加到标记< select data-dojo-type =dojox / form / CheckedMultiSelectclass =narrow < / code>或JavaScript（通过 className ）：

For both of your needs you need to limit the width of dojox/form/CheckedMultiSelect. It can be done adding narrow class to the markup <select data-dojo-type="dojox/form/CheckedMultiSelect" class="narrow"> or JavaScript (via className):

.narrow .dojoxCheckedMultiSelectWrapper {
    width: 100px;
}

对于横向滚动添加另外滚动 class（ class =narrow scroll）：

For horizontal scrolling add also scroll class (class="narrow scroll"):

.scroll .dojoxCheckedMultiSelectWrapper {
    overflow-x: scroll;
}

对于包装，选项文本添加 wrap class（ class =narrow wrap）：

For wrapping the option text add wrap class (class="narrow wrap"):

.wrap .dojoxMultiSelectItemLabel {
    white-space: normal;
}

.wrap .dojoxMultiSelectItemBox {
    vertical-align: top;
    margin-top: 3px;
}

根据订单，您可以添加样式表，您可能需要添加！important 。

Depending on the order you include stylesheets you may need to add !important.

这篇关于Dojo CheckedMultiSelect文本换行和水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！