Scott Mackenzie Scott Mackenzie - 3 years ago 84
CSS Question

Text inside border

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

Answer Source

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%}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download