Text appears outside of the bootstrap modal

Question

Text appears outside of the bootstrap modal

Navigation

#1 by (0 votes)

0

Friends, can someone help me with this problem? I have a modal, which contains a table with several cells, and one of the cells contains a long text, but the text comes out of the modal not respecting the cell. Attached image for reference.

Can anyone know why this happens?

The code and classes are as follows:

<!-- MODAL DE INFORMACION PROCESOS -->
<div class="modal fade" id="verProcesoModal" role="dialog" data-keyboard="false">
 <div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
      <div class="modal-header"><h5 class="title" id="varCodigoProceso"></h5></div>
        <!-- MODAL BODY -->
        <div class="modal-body">
            <label>Detalles del proceso realizado:</label>
            <div id="varProcesoTecnico2">

            <table class="table table-striped table-bordered" style="table-layout:fixed">
                <tbody>
                    <tr>
                        <td width="250px">Fecha del proceso:</td>
                        <td class="text-primary"></td>
                    </tr>
                    <tr>
                        <td>Técnico del proceso:</td>
                        <td class="text-primary">Juan Lopez</td>
                    </tr>
                    <tr>
                        <td>¿Que Software o Drivers instaló?:</td>
                        <td class="text-primary">SISTEMA OPERATIVO + DRIVERS + SOFTWARE
                    </td>
                    </tr>
                    <tr>
                        <td>Observaciones del Proceso:</td>
                        <td>EL AJAX ES SIMPLEMENTE "SERIALIZAR" EL FORMULARIO, Y EN EL CONTROLADOR SIMPLEMENTE RECIBES LOS DATOS Y LOS SEPARAS, REVISA LA DOCUMENTACIóN, REALMENTE ES MUY SENCILLO.</td>
                    </tr>
                    <tr>
                        <td>Costo del proceso:</td>
                        <td class="text-primary"> $ 5000</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
        <!-- FIN MODAL BODY -->
        <div class="modal-footer">
        <button type="button" class="btn btn-block btn-danger" data-dismiss="modal">Cerrar Proceso</button>
      </div>
  </div>
</div>
</div>

Thank you very much

javascript bootstrap modal

asked by Ricardo Magnatera 16.10.2018 в 22:57

source

1 answer

I want to bring two records of my ID and DISTRICT fields but the districts are duplicated I want to bring only one of them as I do? how to iterate in a dataframe with loop for

score 0 · Answer 1

Try to emulate your situation by placing the text all pasted to make the same effect like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- MODAL DE INFORMACION PROCESOS -->
<div class="modal fade" id="verProcesoModal" role="dialog" data-keyboard="false">
 <div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
      <div class="modal-header"><h5 class="title" id="varCodigoProceso"></h5></div>
        <!-- MODAL BODY -->
        <div class="modal-body">
            <label>Detalles del proceso realizado:</label>
            <div id="varProcesoTecnico2">

            <table class="table table-striped table-bordered" style="table-layout:fixed">
                <tbody>
                    <tr>
                        <td width="250px">Fecha del proceso:</td>
                        <td class="text-primary"></td>
                    </tr>
                    <tr>
                        <td>Técnico del proceso:</td>
                        <td class="text-primary">Juan Lopez</td>
                    </tr>
                    <tr>
                        <td>¿Que Software o Drivers instaló?:</td>
                        <td class="text-primary">SISTEMA OPERATIVO + DRIVERS + SOFTWARE
                    </td>
                    </tr>
                    <tr>
                        <td>Observaciones del Proceso:</td>
                        <td>ELAJAXESSIMPLEMENTE"SERIALIZAR"ELFORMULARIO,YENEL CONTROLADORSIMPLEMENTERECIBESLOSDATOSYLOSSEPARAS,REVISALADOCUMENTACIóN,REALMENTEESMUYSENCILLO.</td>
                    </tr>
                    <tr>
                        <td>Costo del proceso:</td>
                        <td class="text-primary"> $ 5000</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
        <!-- FIN MODAL BODY -->
        <div class="modal-footer">
        <button type="button" class="btn btn-block btn-danger" data-dismiss="modal">Cerrar Proceso</button>
      </div>
  </div>
</div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#verProcesoModal">
  Ver Modal
</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Now to fix it, place a css property that very likely can serve you which is word-break: break-all; , try to place it in your code like this:

#verProcesoModal table td{
  word-break: break-all !important;
}

Functional example:

#verProcesoModal table td{
  word-break: break-all !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- MODAL DE INFORMACION PROCESOS -->
<div class="modal fade" id="verProcesoModal" role="dialog" data-keyboard="false">
 <div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
      <div class="modal-header"><h5 class="title" id="varCodigoProceso"></h5></div>
        <!-- MODAL BODY -->
        <div class="modal-body">
            <label>Detalles del proceso realizado:</label>
            <div id="varProcesoTecnico2">

            <table class="table table-striped table-bordered" style="table-layout:fixed">
                <tbody>
                    <tr>
                        <td width="250px">Fecha del proceso:</td>
                        <td class="text-primary"></td>
                    </tr>
                    <tr>
                        <td>Técnico del proceso:</td>
                        <td class="text-primary">Juan Lopez</td>
                    </tr>
                    <tr>
                        <td>¿Que Software o Drivers instaló?:</td>
                        <td class="text-primary">SISTEMA OPERATIVO + DRIVERS + SOFTWARE
                    </td>
                    </tr>
                    <tr>
                        <td>Observaciones del Proceso:</td>
                        <td>ELAJAXESSIMPLEMENTE"SERIALIZAR"ELFORMULARIO,YEN EL CONTROLADORSIMPLEMENTERECIBESLOSDATOSYLOSSEPARAS,REVISALADOCUMENTACIóN,REALMENTEESMUYSENCILLO.</td>
                    </tr>
                    <tr>
                        <td>Costo del proceso:</td>
                        <td class="text-primary"> $ 5000</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
        <!-- FIN MODAL BODY -->
        <div class="modal-footer">
        <button type="button" class="btn btn-block btn-danger" data-dismiss="modal">Cerrar Proceso</button>
      </div>
  </div>
</div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#verProcesoModal">
  Ver Modal
</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

I am NOT saying that your text is together as I force it, but surely there is some CSS that prevents you from respecting your cell, so force this effect so that you can guide yourself and hopefully the answer to your problem.