CODEWITHSUNDEEP
angular-ui-bootstrap
Peter
Peter

Reputation: 38515

Linebreaks in popover

I have a popover where i want all the content of my span tags to stay on the same line but allow linebreakes between span tags if needed.

But if i apply white-space: nowrap; on my span tags all my content is placed on one line and going outside the popover. enter image description here

<button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-default">Popover With Template</button>

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
      <span style="white-space: nowrap;">Word one, </span>
      <span style="white-space: nowrap;">Word two, </span>
      <span style="white-space: nowrap;">Word three, </span>
      <span style="white-space: nowrap;">Word four, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
      <span style="white-space: nowrap;">Test, </span>
    </div>
</script>

http://plnkr.co/edit/grWorND24x0Zo378hGxO?p=preview

Upvotes: 0

Views: 389

Answers (1)

c_sans
c_sans

Reputation: 36

You need spaces between the span tags otherwise it will treat it like 1 word.

A more maintainable solution is to use "display: inline-block;". It tries to keep text of each item on 1 line but only if it all fits on that line. It also breaks to the next line if it's going to overflow and takes up an entire line.

Also, I would suggest using css styles instead of inline styles since those are much more maintainable. If you don't want to make a stylesheet you can do something like this:

<style>
.popover-content span {
    display: inline-block;
}
</style>

Upvotes: 2

Related Questions