CODEWITHSUNDEEP
twitter-bootstrapangularpopover
sa_
sa_

Reputation: 2994

Cannot set width of bootstrap popover in angular project

There are couple of stackoverflow questions about this subject but none of them worked for me. Maybe this is related somehow with angular4.

Basically I'm just trying to set width of the popover control.

This is the screenshot to understand the issue better.

enter image description here

<a id="searchPopup" data-html="true" data-placement="auto left" data-container="body" data-toggle="popover">
  <span mdTooltip="Search another website worth" class="glyphicon glyphicon-search">
  </span>
</a>

<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
  test test test test test test test test test test test test test
  <table style="width:1000px;border:1px;">
    <tr>
      <td>
        test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 
      </td>
    </tr>
  </table>
</div>

  ngOnInit() {

    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function () {
        return $('#popover-content').html();
      }
    });

  }

.popover {
        max-width: 100% !important;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 2

Views: 2087

Answers (1)

sa_
sa_

Reputation: 2994

Finally I have solved this issue. I just moved the css code from component.css file into styles.css file. I don't have any idea why it doesn't work in the component css. 

.popover { max-width: 100% !important;}

Upvotes: 2

Related Questions