Проблема с горизонтальным выравниванием HTML-списка, созданного молнией - PullRequest
Новая
       6

Проблема с горизонтальным выравниванием HTML-списка, созданного молнией

0 голосов
/ 29 июня 2018

Я недавно взял на себя небольшой проект, начатый другим разработчиком, одна из основных частей этого проекта включает отображение информации в календаре. Этот календарь создается с использованием Javascript в компоненте молнии salesforce, JS создает неупорядоченный список, а затем заполняет этот список элементами списка, которые действуют как дни. И здесь кроется проблема: всякий раз, когда в течение дня отображается такая информация, как ссылка, элемент списка перемещается так, что последняя строка каждого дня совпадает с предыдущим днем, например так:

Сломанные календарные дни:

enter image description here

Каждый элемент списка содержит тег абзаца, который содержит номер дня и, если применимо, ссылку, каждый из которых разделен переводом строки.

Вот javascript внутри компонента молнии: 

var number = DayNumber(i + 1);
// Check Date against Event Dates
for (var n = 0; n < calendar.Model.length; n++) {
  var evDate = calendar.Model[n].Date;
  var toDate = new Date(calendar.Selected.Year, calendar.Selected.Month, (i + 1));
  if (evDate.getTime() == toDate.getTime()) {
    number.className += " eventday";
    var title = document.createElement('span');
    title.className += "cld-title";
    if (typeof calendar.Model[n].Link == 'function' || calendar.Options.EventClick) {
      var a = document.createElement('a');
      a.setAttribute('href', '#');
      a.innerHTML += calendar.Model[n].Title;
      if (calendar.Options.EventClick) {
        var z = calendar.Model[n].Link;
        if (typeof calendar.Model[n].Link != 'string') {
          a.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)));
          if (calendar.Options.EventTargetWholeDay) {
            day.className += " clickable";
            day.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)));
          }
        } else {
          a.addEventListener('click', calendar.Options.EventClick.bind(null, z));
          if (calendar.Options.EventTargetWholeDay) {
            day.className += " clickable";
            day.addEventListener('click', calendar.Options.EventClick.bind(null, z));
          }
        }
      } else {
        a.addEventListener('click', calendar.Model[n].Link);
        if (calendar.Options.EventTargetWholeDay) {
          day.className += " clickable";
          day.addEventListener('click', calendar.Model[n].Link);
        }
      }
      title.appendChild(a);
    } else {
      title.innerHTML += '<a href="' + calendar.Model[n].Link + '">' + calendar.Model[n].Title + '</a>';
    }
    number.innerHTML += "</br>" + title.innerHTML;
  }
}
day.appendChild(number);

Они отображаются в виде встроенного блока и используют границу для создания иллюзии календаря. Есть ли способ изменить или переопределить способ выравнивания элементов в этом списке?

1 Ответ

0 голосов
/ 03 июля 2018

Таким образом, проблема была вызвана тем, как неупорядоченные списки обрабатывали выравнивание строк. Я изменил элементы CSS дня, чтобы включить переполнение: авто, это скорректировано для проблемы вертикального выравнивания, вызванного текстом.

...