Код CSS для левой границы Div с маркерами для каждого содержимого
У меня есть блок html, в котором я должен добавить синий цвет для border-left его div и добавить маркеры в начале каждого содержимого, как показано на изображении ниже.
Я попытался использовать приведенный ниже код, но мой дизайн не соответствует приведенному выше изображению. На изображении ниже показано, что я разработал.
Ниже мой код html для этого всплывающего окна:
<div id = "AuditModal" class = "modal">
<div class = "modal-content">
<div>
<h1 class = "chart-heading-cls AuditTitle">Audit</h1>
<a class = "modal-close"><img class = "Close closemodal" src = "~/Close.svg"></a>
</div>
<div id = "Audit">
<div class = "card-content">
</div>
</div>
</div>
</div>
Внутри которого я добавляю содержимое в цикле, используя jQuery, как показано ниже:
markup = "<div><div class='UserTitle UserTitleBullet pl23'>" + ActionData[i].ACTION_TAKEN_BY + "</div><div style='float:right'><img src='../raised.svg' class='material-icons' alt='Alert'/></div></div>" +
"<br /><div class='RDTitle pl23'><div style='width:160px;float:left''>" + Role + "</div><div style='width:160px;float:left''> " + Date + "</div></div>" +
"<div class='CommentTitle pl23'>Comment</div>" +
"<div class='CommentDescription pl23'>" + ActionData[i].DESCRIPTION + "</div>" +
"<br /><br />";
tableBody = $("#Audit");
tableBody.append(markup);
Вот мой код CSS:
.UserTitleBullet {
background: #1A9AD4;
width: 10px;
height: 10px;
border-radius: 50%;
display: flex;
align-items: center;
text-align: center;
}
#Audit {
border-left: 3px solid #1A9AD4;
margin-top: 24px;
margin-bottom: 24px;
overflow-y: auto;
height: 302px;
}
Можете ли вы помочь мне достичь того, что в оригинальном дизайне?
Здесь мое требование - исправить дизайн divleft-border, который не совпадает с 1-м изображением.
я не вижу разницы
Извините за ошибку, сейчас отредактировал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это вопрос CSS, а не jQuery или JavaScript.
Проблема заключается в том, что у синего индикатора выполнения слева есть условия отображения, которые делают простое border-left недостаточным: для первого элемента над маркером нет синего цвета; а для последнего пункта под маркером нет синего цвета. Поэтому нам нужен способ изменить цвет полосы над и под маркером.
Мое решение — использовать фон с линейным градиентом CSS. Вместо того, чтобы использовать его для мягкого перехода от одного цвета к другому, я использую его для резкого перехода от одного цвета к другому.
Затем я помещаю маркер внутрь полосы и позиционирую его абсолютно так, чтобы он находился точно по центру в том месте, где меняется цвет.
Мой подход использует классы-модификаторы, чтобы иметь разные стили панели для первого и последнего элементов в списке — .bar--first и .bar--last. Он также использует flexbox, чтобы расположить панель слева от содержимого элемента и убедиться, что она простирается на всю высоту содержимого.
#Audit {
height: 302px;
margin-top: 24px;
margin-bottom: 24px;
margin-left: -5px;
margin-right: -5px;
overflow-y: auto;
padding: 0 5px;
}
.action-item {
display: flex;
}
.action-item-body {
flex: 1 1 100%;
padding: 0 20px;
}
.bar {
background: #1a9ad4;
position: relative;
width: 4px;
}
.bar.bar--first {
background: linear-gradient(to bottom, white 10px, #1a9ad4 10px, #1a9ad4);
}
.bar.bar--last {
background: linear-gradient(to bottom, #1a9ad4 10px, white 10px, white);
}
.bullet {
background: #1a9ad4;
border-radius: 50%;
position: absolute;
height: 10px;
left: -3px;
top: 7px;
width: 10px;
}
.bullet.bullet--active {
box-shadow: 0 0 10px #1a9ad4;
}<div class = "action-item">
<div class = "bar bar--first">
<div class = "bullet "></div>
</div>
<div class = "action-item-body">
<div>
<div class = "UserTitle pl23">John</div>
<div style = "float:right">
<img src = "../raised.svg" class = "material-icons" alt = "Alert">
</div>
</div>
<br>
<div class = "RDTitle pl23">
<div style = "width:160px;float:left">Foo</div>
<div style = "width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
</div>
<div class = "CommentTitle pl23">Comment</div>
<div class = "CommentDescription pl23">Lorem ipsum dolor</div>
<br><br>
</div>
</div>
<div class = "action-item">
<div class = "bar ">
<div class = "bullet "></div>
</div>
<div class = "action-item-body">
<div>
<div class = "UserTitle pl23">John</div>
<div style = "float:right">
<img src = "../raised.svg" class = "material-icons" alt = "Alert">
</div>
</div>
<br>
<div class = "RDTitle pl23">
<div style = "width:160px;float:left">Foo</div>
<div style = "width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
</div>
<div class = "CommentTitle pl23">Comment</div>
<div class = "CommentDescription pl23">Lorem ipsum dolor</div>
<br><br>
</div>
</div>
<div class = "action-item">
<div class = "bar bar--last">
<div class = "bullet bullet--active"></div>
</div>
<div class = "action-item-body">
<div>
<div class = "UserTitle pl23">John</div>
<div style = "float:right">
<img src = "../raised.svg" class = "material-icons" alt = "Alert">
</div>
</div>
<br>
<div class = "RDTitle pl23">
<div style = "width:160px;float:left">Foo</div>
<div style = "width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
</div>
<div class = "CommentTitle pl23">Comment</div>
<div class = "CommentDescription pl23">Lorem ipsum dolor</div>
<br><br>
</div>
</div>Я также создал скрипку , которая использует шаблон Handlebars для построения HTML.
Я попробовал это кодовое решение. Но дизайн почти такой же. но все же разница есть с пунктами списка. теперь видна только половина. Я приложил изображение для того же в вопросе
@user18243370 user18243370 Я полагаю, что это связано со свойством overflow-y: auto, которое у вас есть в элементе #Audit, чтобы дать ему прокрутку. Мы можем решить эту проблему, добавив отступы к элементу со смещенным отрицательным полем, чтобы наше выравнивание не нарушалось — { margin-left: -5px; margin-right: -5px, padding: 0 5px; }. Я добавил правила CSS #Audit во фрагмент и обновил скрипт.
Я также добавил margin-left: 4px; в стиль класса .bar, чтобы настроить его под размер экрана. Теперь решил и эту проблему.
Разве оба изображения не одинаковы?