CODEWITHSUNDEEP
htmlcssangular
Deepak
Deepak

Reputation: 2742

Why is border bottom getting trimmed?

I am using CSS in a list to show a solid border for a selected item in the list. Everything works fine except the bottom left of that solid being cut off in an inclined fashion while it shows correctly at top. What am I doing wrong?

enter image description here

CSS:

.item {
  list-style: none;
  width: -webkit-fill-available;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 37px !important;
  font-weight: 600;
  border-bottom: 0.1px solid #e8e8e8;
  margin-right: 200px;
}

.menu {
  background: #F8F9FA;
  min-height: 100%;
  float: left;
  width: 100%;
  position: absolute;

  ul {
    margin: 0px;
    list-style: none;
    padding: 0px;

    li {
      font-size: 13.5px;
      padding: 10px;
    }

    li:hover {
      text-decoration: none;
      background-color: #f3f4f5;
    }
  }
}

.enable {
  background-color: #FFFFFF !important;
  border-right: 5px solid #3081ed;
}

HTML:

<div class="menu">
          <ul style="display: inline">
            <li class="item" [ngClass]="{'enable': selectedItem == 'Test 1'}" (click)="selectedItem = 'Test 1'">
              <span class="ml-2"> Test 1 </span>
            </li>
            <li class="item" [ngClass]="{'enable': selectedItem == 'Test 2'}" (click)="selectedItem = 'Test 2'">
              <span class="ml-2"> Test 2 </span>
            </li>
          </ul>
        </div>

Here's a stackblitz demo attached for CSS and html markup.

Upvotes: 1

Views: 590

Answers (1)

Alireza Varmaghani
Alireza Varmaghani

Reputation: 396

Problem: I've checked your code, everything is fine except this line border-bottom: 0.1px solid #e8e8e8; because of border-bottom, there is a tridimensional sense of the li element and that's why the left side is crooked.

Solution:

  1. To fix it out you should remove border-bottom and instead of it use CSS Shadow; something like => box-shadow: 0px 0.1px #000;

in your code:

    .item {
        list-style: none;
        width: -webkit-fill-available;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 200px !important;
        font-weight: 600;
       /* border-bottom: 0.1px solid #e8e8e8; */      =>remove this line
        box-shadow: 0px 0.1px #000;                   =>add this line
        margin-right: 200px;
    }
  1. or you can use 'before' or 'after' to make a new element for putting a solid shape on the right side of your enabled item.

in your code:

      .enable {
         background-color: #FFFFFF !important;
         /* border-right: 5px solid #3081ed; */    =>remove this line
          position:relative;                       => add this line
      }

      li.item.enable::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 37px;
      position: absolute;
      right: 0;
      background: #3081ed;
   }

Upvotes: 1

Related Questions