InnerHTML angular 5 does not respect width

Question

InnerHTML angular 5 does not respect width

Navigation

#1 by (0 votes)

0

I'm painting the response of a service inside a modal with innerHTML. But this is not respecting the width of the modal itself and is writing in the same line to infinity.

The modal is a bootstrap ngbModal link

Has anyone had to deal with this at any time? I've tried to set a width to modal-content but it has not worked.

The way I paint the text is:

 <div [innerHTML]="info.text1"></div>

<div>
<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div [innerHTML]="info.text1">

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>

It is looking like this:

I update with the modal HTML. In css I do not have anything yet, I just tried with .modal-body { width: 100px; }

angular angular5 modal innerhtml

asked by Findelias 10.12.2018 в 18:00

source

1 answer

how can I add a parameter to a url with jquery Help with creating SQLITE3 tables

score 0 · Answer 1

Try the following:

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div [innerHTML]="info.text1" class="text-modal">

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

CSS

.text-modal{
  word-break : break-word;
  width: 100%;
}

Another option is if it is only a text, it is preferable that you place it in a span and not a div

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div>
        <span [innerHTML]="info.text1" class="text-modal"></span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

You can try it only with the span, without adding the class.

Another thing that I recommend and that this can be generated by the way you are inserting it is, if it is only a text that returns a service, it is better to put it directly on the label:

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div>
        <span>{{info.text1}}</span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

Try and tell me anything: D