Issue
So This is my div and the for loop creates a new list item and based on the id of the ticket in the database it displays all the states the ticket was in i.e open, In Progress , closed, etc.
<div id="Child" style="display:inline-block;" class="box">
<ul id="first-list">
<!--Foreach Goes Here-->
@foreach (var item in Model)
{
<li>
<span></span>
<div class="title">
@Html.DisplayFor(model => item.Description)
</div>
<div class="info">@Html.DisplayFor(model => item.ActivityContent).</div>
<div class="info">@Html.DisplayFor(model => item.Subject) <a href=@Url.Action("EditActivity", "Home", new { area = "EditActivity", Id = item.TicketId , TypeId = item.ActivityTypeId }) data-toggle="modal" data-target="#editModal" data-modal="edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></div>
<div class="name">- @Html.DisplayFor(model => item.CreatedByUser)</div>
<div class="time">
@if(item.ModifiedDateTime != null)
{
<span>@(item.ModifiedDateTime == null ? "" : Convert.ToDateTime(item.ModifiedDateTime).ToString("MMMM dd, yyyy"))</span>
}
else
{
<span>@(item.CreatedDateTime == null ? "" : Convert.ToDateTime(item.CreatedDateTime).ToString("MMMM dd, yyyy"))</span>
}
@if(item.ModifiedDateTime != null)
{
<span style="padding-left:35px;">@(item.ModifiedDateTime == null ? "" : Convert.ToDateTime(item.ModifiedDateTime).ToShortTimeString())</span>
}
else
{
<span style="padding-left:35px;">@(item.CreatedDateTime == null ? "" : Convert.ToDateTime(item.CreatedDateTime).ToShortTimeString())</span>
}
</div>
</li>
}
</ul>
</div>
What I would like to do is add a different color for each state. such as green when the state is open and red when closed. Anyone have a good way to approach this? I am setting the color for the div in a class called box which looks like this...
.box ul li {
margin: 30px 60px 60px;
position: relative;
padding: 5px 5px 5px 5px;
background: #e56565;
color: #fff;
border-radius: 10px;
line-height: 20px;
width: 55%
}
Thanks in advance for any help with this issue.
Solution
The more maintainable way is to add a new column to your state look up table for the background color or css class. Seed the value with the color you want and read it from the table and use it.
Another option is to create CSS classes which matches with the state name/code/id. and use that. The problem with this approach is, every time you add a new status to the system, you need a code change as well (Adding a new css class). These css classes will be simply to override the bg color. So your code will generate the css class name by using the state code/name/id/.
Something like this.
@foreach (var item in Model)
{
<li class="li-@(item.State.Code)">
<!-- Existing code-->
</li>
}
Assuming you have State code values such as open and closed, you will create 2 css classes
.li-open
{
background-color:green;
}
.li-closed
{
background-color: red;
}
These specific css classes should override the default li styles. Use !important
as needed in your css
Answered By - Shyju
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.