Html Question posted in
Some basic documentation can be found here.

Html – Apply CSS to div inside td tag

I am trying to position the triangle over the table cell edge on both end. But half part of triangle is hidden. I tried to apply z-index as well but no impact. Can someone throw light what could go wrong here?

[![enter image description here][1]][1]

Expected
[![enter image description here][2]][2]

Here is my Angular code

<td *ngFor="let col of getNumberRange(1, maxDuration)" style="padding: 0;">
                        <div style="position: relative;">
                            <div *ngIf="col == 1" class="triangle-up"></div>
                            <div *ngIf="col == 1" class="start-abbreviation">START</div>
                            <div *ngIf="col == 5" class="end-abbreviation">END</div>
                            <div *ngIf="col == 5" class="triangle-down"></div>
                            <div *ngIf="col >= 1 && col <= 5
                                style="height: 15px; background-color: #1f4166; padding-top: 5px;"></div>
                        </div>
                    </td>

CSS

    .triangle-up {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ff6600;
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 1;
}

.start-abbreviation {
  display: inline-block;
  margin-left: 5px;
  position: absolute;
  top: 0px;
  color: white;
  left: 0;
  z-index: 99999999999;
}

.triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #ff6600;
  position: relative;
  top: -13px;
}

.end-abbreviation {
  display: inline-block;
  margin-right: 5px;
  position: absolute;
  top: 0px;
  color: white;
  left: 0;
  z-index: 99999999999;
}```


  [1]: https://i.stack.imgur.com/8eIYe.png
  [2]: https://i.stack.imgur.com/HXkUh.png
Tags:

2

Answers


  1. 0

    It might be due to the fact that the container does not have overflow: visible so we can just add the CSS to the parents, which will allow the arrow to be visible. Also made some extra CSS to make the output look like the screenshot!

    css

    /* Add application styles & imports to this file! */
.triangle-up {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ff6600;
  position: absolute;
  top: -7px;
  left: -4.5px;
  z-index: 1;
}

.start-abbreviation {
  display: inline-block;
  margin-left: 5px;
  position: absolute;
  top: -11px;
  color: white;
  left: 0;
  z-index: 99999999999;
}

.triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #ff6600;
  position: absolute;
  top: -7px;
  right: -4.5px;
}

.end-abbreviation {
  display: inline-block;
  margin-right: 5px;
  position: absolute;
  top: -11px;
  color: white;
  left: 0;
  z-index: 99999999999;
}

.cell-wrapper {
  padding: 0;
  height: 15px;
  background-color: #1f4166;
  padding-top: 5px;
  min-width: 50px;
  overflow: visible !important;
}

    Stackblitz Demo

    Login or Signup to reply.
  2. 0

    Make sure to adjust the top and bottom values for .triangle-up and .triangle-down respectively to ensure they align correctly with the edges of the table cell.

    .triangle-up {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #ff6600;
    position: absolute;
    top: -10px;/*do correctly like this*/
    left: 0;
    z-index: 1;
}

.start-abbreviation {
    display: inline-block;
    margin-left: 5px;
    color: white;
    z-index: 99999999999;
}

.triangle-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #ff6600;
    position: absolute;
    bottom: -10px; /*do correctly like this*/
    left: 0;
    z-index: 1;
}

.end-abbreviation {
    display: inline-block;
    margin-right: 5px;
    color: white;
    z-index: 99999999999;
}
    <td *ngFor="let col of getNumberRange(1, maxDuration)" style="padding: 0; position: relative;">
    <div *ngIf="col == 1" class="triangle-up"></div>
    <div *ngIf="col == 1" class="start-abbreviation">START</div>
    <div *ngIf="col == 5" class="end-abbreviation">END</div>
    <div *ngIf="col == 5" class="triangle-down"></div>
    <div *ngIf="col >= 1 && col <= 5" style="height: 15px; background-color: #1f4166; padding-top: 5px;"></div>
</td>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search