如何确定输入宽度和标签间距以与周围闪电输入相匹配
如何确定输入宽度和标签间距以与周围闪电输入相匹配
提问于 2022-07-25 13:51:37
我有一个LWC，有一个由过滤器组成的部分。其中大多数是标准闪电输入，但其中两个是自定义查找组件。问题是，我找不到办法让他们对齐，看上去也一样..即使在内部，它也在应用slds css类(在某种程度上)。现在的情况是这样的：
正如您所看到的，每个闪电输入都正确地对齐，但是两个查找组件的输入更宽，标签和输入之间的空间也更小。
这是查找html代码：
<template>
<label if:true={label} class={getLabelClass} for="combobox">
<abbr if:true={required} title="required" class="slds-required">*</abbr>
{label}
</label>
<div class={getContainerClass}>
<div class={getDropdownClass} aria-expanded={hasResults} aria-haspopup="listbox" role="combobox">
<!-- Search input start -->
<div class={getComboboxClass} role="none">
<!-- Text input -->
<template if:false={useInput}>
<slot
aria-autocomplete="list"
aria-controls="listbox"
role="textbox"
id="combobox"
onchange={handleInput}
oninput={handleInput}
onkeydown={handleKeyDown}
onslotchange={handleSlotChange}
></slot>
</template>
<template if:true={useInput}>
<input onfocus={handleFocus}
onblur={handleBlur}
oninput={handleInput}
class="slds-input"
style="color: black;"/>
</template>
<template if:true={isLookup}>
<!-- Search icon -->
<lightning-icon
icon-name="utility:search"
size="x-small"
alternative-text="Search icon"
class={getSearchIconClass}
></lightning-icon>
<button
title="Remove selected option"
type="button"
onclick={handleClearSelection}
class={getClearSelectionButtonClass}
disabled={disabled}
>
<lightning-icon
icon-name="utility:close"
size="x-small"
alternative-text="Remove selected option"
class="slds-button__icon"
></lightning-icon>
</button>
</template>
</div>
<!-- Search input end -->
<!-- Result list box start -->
<div
id="listbox"
role="listbox"
>
<ul class={getListboxClass} role="presentation">
<!-- Spinner to display when waiting for results of search -->
<div if:true={loading}>
<lightning-spinner variant="brand" alternative-text="Loading" size="small"></lightning-spinner>
</div>
<template for:each={_searchResults} for:item="result">
<li data-id={result.id} onmousedown={handleResultClick} class="slds-listbox__item" key={result.id} role="presentation">
<div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<c-lookup-result template={_template} result={result}></c-lookup-result>
</div>
</li>
</template>
<!-- Result list end -->
<!-- No results start -->
<template if:false={hasResults}>
<li role="presentation">
<span class="slds-media slds-listbox__option_entity" role="option">
<span if:false={loading} class="slds-media__body">No results.</span>
<span if:true={loading} class="slds-media__body">Loading...</span>
</span>
</li>
</template>
<!-- No results end -->
</ul>
</div>
<!-- Result list box end -->
</div>
</div>
</template>在我的例子中，"useInput“是真的
--这些是getter：
get getContainerClass() {
let css = 'slds-combobox_container'; // slds-has-inline-listbox // sacado porque moleasta
if (this._hasFocus && this.hasResults) {
css += 'slds-has-input-focus ';
}
if (this.errors.length > 0) {
css += 'has-custom-error';
}
return css;
}
get getDropdownClass() {
let css = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ';
if (this._hasFocus && (this._currentConfig || this.loading)) {
css += 'slds-is-open';
}
return css;
}
get getComboboxClass() {
let css = 'slds-combobox__form-element slds-input-has-icon ';
return css += this.hasSelection() ? 'slds-input-has-icon_left-right' : 'slds-input-has-icon_right';
}
get getListboxClass() {
return (
'slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid ' +
(this.scrollAfterNItems ? 'slds-dropdown_length-with-icon-' + this.scrollAfterNItems : '')
);
}
get getClearSelectionButtonClass() {
return (
'slds-button slds-button_icon slds-input__icon slds-input__icon_left ' +
(this.hasSelection() ? '' : 'slds-hide')
);
}
get getSearchIconClass() {
let css = 'slds-input__icon slds-input__icon_right ';
if (!this.isMultiEntry) {
css += this.hasSelection() ? 'slds-hide' : '';
}
return css;
}
get getLabelClass() {
return this.variant === VARIANT_LABEL_HIDDEN
? 'slds-form-element__label slds-assistive-text'
: 'slds-form-element__label';
}
get input() {
return this._input;
}，这是我在图像上的代码：
<template if:true={filters}>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2">
<c-lwc-filter filter={filters.Nombre} input-variant="label-inline"></c-lwc-filter>
<c-lwc-filter filter={filters.Codigo} input-variant="label-inline"></c-lwc-filter>
<c-lwc-filter filter={filters.CodigoFabricante} input-variant="label-inline"></c-lwc-filter>
</div>
<div class="slds-col slds-size_1-of-2">
<c-lwc-filter filter={filters.CodigoBarra} input-variant="label-inline"></c-lwc-filter>
<div class="slds-form-element slds-form-element_horizontal">
<c-lookup label="Familia" is-lookup=true use-input=true configs={configsFamilia} onremoveselection={removeSelection} data-name="_familiaId"></c-lookup>
</div>
<div class="slds-form-element slds-form-element_horizontal">
<c-lookup label="Marca" is-lookup=true use-input=true configs={configsMarca} onremoveselection={removeSelection} data-name="_marcaId"></c-lookup>
</div>
<c-lwc-filter filter={filters.Modelo} input-variant="label-inline"></c-lwc-filter>
</div>
</div>
</template>( lwcFilter组件内部是闪电输入)
我让标签是内联的，将我的自定义查找lwc封装在一个div中，其中包含了slds form-element_ label类。但是问题是，由于查找中的“输入”不仅仅是一个正常的输入，它更宽，正如我前面所说的，标签和所述输入之间的间隔非常小。
我怎么能让它们看起来和基本的闪电输入一样呢？让它在每一个屏幕上工作？(因为我试着使用边距或填充，但对于更小/更大的屏幕却不一样)
任何帮助都将不胜感激！
回答 1
Stack Overflow用户
发布于 2022-07-27 07:30:19
您是否尝试过将slds-form-element__control包括在getContainerClass()中？就像这样：
get getContainerClass() {
let css = 'slds-combobox_container slds-form-element__control'; // slds-has-inline-listbox // sacado porque moleasta
// ... rest of logic
return css;
}有什么坏消息吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73110396
复制相关文章
相似问题
腾讯云开发者
