1

I have a piece of html/css code I use inside my angular application that I want to rework so I can add text into my solid border.

.colorstripGreen{
    padding: 0px;
    width: 100%; height: 100%;
    border-left: solid;
    border-width: 15px;
    border-color: #228b22;
}
<div *ngIf="level == '4'">
  <div class="w3-col" style="width: 14%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1%;">
    <div (click)="populateDropDowns(); getChangeLog(); getRequestLog();  myModal.open();">
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p>{{surgAM}}<br>{{deptAM}}</p>
          </div>
        </div>
      </div>
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p>{{surgPM}}<br>{{deptPM}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

In my application this shows as follows:

enter image description here

What I want to be able to do is edit the css and html to include a number inside the solid green box. How can I achieve this?

Thanks

1 Answer 1

2

The following CSS and html do I believe what you are saying https://jsfiddle.net/h3aenLkh/

<div *ngIf="level == '4'">
  <div class="w3-col" style="width: 14%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1%;">
    <div (click)="populateDropDowns(); getChangeLog(); getRequestLog();  myModal.open();">
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p><span>1</span>{{surgAM}}<br>{{deptAM}}</p>
          </div>
        </div>
      </div>
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p><span>1</span>{{surgPM}}<br>{{deptPM}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

and css

.colorstripGreen{
    padding: 0px;
    width: 100%; height: 100%;
    border-left: solid;
    border-width: 15px;
    border-color: #228b22;
}

.colorstripGreen span{position:relative;left:-15px;bottom:-100%}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.