在我的select2代码中，我使用<span class="full-width">text</span>将文本包装在full-width中。我还附加了一个Bootstrap popover。 width: 100%'是一个<li class="select2-results__open"...的班级。但是，它没有占据下拉列表的整个宽度，这可以通过以下事实得到证明：仅当光标位于实际文本上时才会发生弹出窗口，而不是文本右侧的空格。当我查看检查器时，包含它的<span class="full-width">text<span>为166x32（全程为6px填充）但实际 templateResult: (data) ->
# Get the select data
text = data.display_name || data.name || data.text
ret = $(
"<span class=\"full-width\"
>#{text}</span>"
)
if data.description
ret.popover({
trigger: 'hover',
container: 'body',
html: true,
content: data.description,
title: data.title || '',
placement: data.placement || 'auto right',
})
ret
仅为56x16，没有填充，边距或边框。如何让它占据整个宽度？
根据要求，这里是templateResult函数（在CoffeeScript中，因为这是该项目的用途）
.full-width: {
width: 100%;
}
和CSS
UIImage答案 0 :(得分：0)
我将import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
const noop = () => { };
@Component({
selector: 'module-builder-instructor-box',
template: `...`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FibaInputTextComponent),
multi: true
}
],
})
export default class ModuleBuilderInstructorSelect implements ControlValueAccessor {
//The internal data model
private innerValue: any = '';
//Placeholders for the callbacks which are later providesd
//by the Control Value Accessor
private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;
//get accessor
get value(): any {
return this.innerValue;
};
//set accessor including call the onchange callback
set value(v: any) {
// Put what you want to do when selected value changes here
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
}
}
//Set touched on blur
onBlur() {
this.onTouchedCallback();
}
//From ControlValueAccessor interface
writeValue(value: any) {
if (value !== this.innerValue) {
this.innerValue = value;
}
}
//From ControlValueAccessor interface
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
//From ControlValueAccessor interface
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
}
添加到.full-width css中，问题就消失了。