1

I need the "foo bar hello world" text (or whatever length text / dynamic length) to be left-aligned but also not have white-space on the right.

enter image description here

My code:

<div style="padding-left: 100px; padding-top: 100px">
  <div style="width: 50px; height: 50px;">
    <button style="width: 100%; height: 100%;" [ngbPopover]="tipContent" placement="bottom" autoClose="outside">Click Me</button>
  </div>
</div>

<ng-template #tipContent>
  <div style=" display:inline-block; height: 100%; width: auto; max-width: 100px;">
    <div style=" height: 100%; text-align: left; vertical-align: center;
                 overflow: hidden; max-width: 200px;">
      foo bar hello world
    </div>
  </div>
</ng-template>

I've created a stackblitz replicating my issue here:

https://stackblitz.com/edit/ngb-popover-vs-tooltip-wbghhh?file=src/my-app.component.html

naveen
  • 53,448
  • 46
  • 161
  • 251
cfoxy17
  • 93
  • 1
  • 5

1 Answers1

-1

@cfoxy17

instead adding max-width: 100px use max-width: auto

I added max-width: auto and it is working fine see below stackblitz

https://stackblitz.com/edit/ngb-popover-vs-tooltip-4qnnkf?file=src/my-app.component.html

Rajesh Kumar Swain
  • 121
  • 1
  • 7