CODEWITHSUNDEEP
cssangularngx-bootstrapngx-bootstrap-popover
HDJEMAI
HDJEMAI

Reputation: 9800

ngx-bootstrap popover display in one line, Text goes beyond the popover

When trying to get a popover displayed in one line using this template:

<ng-template #popTemplate>Here we go: <div [innerHtml]="html" class="myClass"></div></ng-template>
<button type="button" class="btn btn-success"
      [popover]="popTemplate" popoverTitle="Dynamic html inside">
  Show me popover with html
</button>

And by adding a CSS class like:

myClass {
    white space: nowrap;
}

Then the text goes beyond the popup itself.

I've tried to add container="body" or [container]="body" as in the ngx-bootstrap documentation but it is not working

Is there any proper way to have the popover having all the content text inside it ?

This case happen when the content text is long.

I've looked at this answer:

Ngx-Bootstrap popover not setting correct height or width

But it is not working.

Update :

Now, I'm able to see the popover in the debugger, by hovering the tooltip, the following code is added with the pseudo class ::before

<popover-container role="tooltip" style="display: block; top: -6px; left: 310px;" 
    _nghost-c3 class="popover in popover-right bs-popover-right right">
    ...
</popover-container>

I don't know from where the value 310px comes from, but it looks like ngx-bootstrap didn't respond to the provided CSS

Trying an inline CSS directly in the div of the template as:

style="display: inline-block; min-width: 100%; white-space: nowrap;"

Do not work too.

I found that even when you put an inline CSS, the resulting style is as above in the template as style="display: block; top: -6px; left: 310px;" which is very strange.

Upvotes: 4

Views: 5087

Answers (2)

HDJEMAI
HDJEMAI

Reputation: 9800

Finaly I have found the right solution by using this CSS:

.popover {
    white-space: nowrap;
    max-width: none;
}

Because we can see at the generated html code for this popover (see the question), that there are 5 classes used, then I used one of them to apply the relevant CSS.

And I've to set encapsulation to ViewEncapsulation.None in the popover custom component (which uses an input text, to be displayed)

Upvotes: 5

IlyaSurmay
IlyaSurmay

Reputation: 2333

add max-width: 100%; to myClass

.myClass {
    white-space: nowrap;
    max-width: 100%;
}

Upvotes: 1

Related Questions