Я создал элемент пути slds за несколько шагов. Под текущим шагом я хочу получить некоторую субтекстовую информацию, но не всегда может быть субтекстовая информация для каждого шага.
Я достиг этого, сделав div с абсолютным позиционированием с моей информацией внутри него, затем определил текущую позицию шага :
get subtextStyle(){
let subtextStyleStr = 'position: absolute; display: flex; flex-direction: column; align-items: flex-start;';
const pathItemElements = this.template.querySelectorAll('li.slds-path__item');
for(let i = 0; i < pathItemElements.length; i++){
if(pathItemElements[i].dataset.stepStatus === 'In Progress'){
let offsetTop = pathItemElements[i].offsetTop + pathItemElements[i].offsetHeight;
let offsetLeft = pathItemElements[i].offsetLeft;
const width = pathItemElements[i].offsetWidth;
subtextStyleStr += ' top: ' + offsetTop + 'px; left: ' + offsetLeft + 'px; width: ' + width + 'px;';
}
}
return subtextStyleStr;
}
затем выполнение <div style={subtextStyle}>my subtext stuff</div>
Это почти дает мне то, что я хочу, подтекст помещается прямо под текущим элементом пути, и текст не выходит за пределы текущего пути ширина предметов. Проблема в том, что он находится в абсолютном положении, поэтому он не занимает места, поэтому не расширяет контейнер родительской карты и может прятаться за другими вещами на странице молнии прямо под панелью.
Есть ли какое-то расположение, которое может позволить мне разместить что-то в определенном c месте, но также занять место, чтобы убедиться, что оно опускает все под ним, чтобы оно всегда было видно?
По сути то, что я ищу и что у меня есть:
Мне просто нужен этот текст, чтобы занимать место, чтобы он никогда не был скрыт.