Outgoing content of a dialog with CDM

Question

Outgoing content of a dialog with CDM

Navigation

#1 by (0 votes)

1

I have a problem with a dialog using Material Design Lite, I have some tabs with forms inside but for some reason when I put more elements inside the buttons "Save" and "Cancel" go out of the limits of the dialog as It is shown below:

here I attach the source code, I hope someone can help me solve this problem, I do not know if it is because of the CSS that I have it wrong or the HTML

Edit1: sorry, forget to attach the code link

I appreciate your attention

javascript html5 css3 material-design-lite dialog

asked by Fernando A. León 14.05.2018 в 21:39

source

1 answer

Variable This.router undefined within a function How to create sliding below the toolbar

score 0 · Accepted Answer

Here you have it, what I have done is put the buttons inside <form> , body{display:inline-block} and .mdl-dialog{height:fit-content}

/* funciones del modal */
(function() {
        'use strict';
        var dialog = document.querySelector('#modal-example');
        var closeButton = dialog.querySelector('#btn_cerrar');
        var showButton = document.querySelector('#show-modal-example');
        var saveButton = dialog.querySelector('#btn_guardar');
        if (! dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
        }
        var closeClickHandler = function(event) {
            dialog.close();
        };
        var showClickHandler = function(event) {
            dialog.showModal();
        };
        showButton.addEventListener('click', showClickHandler);
        closeButton.addEventListener('click', closeClickHandler);
        saveButton.addEventListener('click', closeClickHandler);
    }());

/* obtener valores de los row de la tabla */
$(document).ready(function() {
    $('#table-nopart tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });
});

/* funcion para la seleccion de la tabla */
function selectElementContents(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 90%;
  height: 90%;
  position:absolute;
  height: fit-content;
}
.mdl-dialog::backdrop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}
.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem; 
}
.mdl-dialog__content{
  overflow-y: auto;
  'overflow:auto;
  max-height: 100%;
}
.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
.mdl-dialog__actions > * {
  margin-right: 8px;
  height: 36px; 
}
.mdl-dialog__actions > *:first-child {
  margin-right: 0;
  'position: fixed;
}
.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0; 
}
.mdl-dialog__actions--full-width > * {
  height: 100%;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right; 
}
.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0,0,0, 0.54); 
}
.mdl-tabs__tab-bar{
  width: 100%;
  height: 100%;
}

'CSS de la tabla del modal
table#table-nopart {
    border-collapse: collapse;   
}
#table-nopart tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#table-nopart tr:hover {
    background-color: #ccc;
}
#table-nopart th {
    background-color: #fff;
}
#table-nopart th, #example td {
    padding: 3px 5px;
}
#table-nopart td:hover {
    cursor: pointer;
}
#show-modal-example{
  width: 100%;
  height: 100%;
}
.mdl-card__supporting-text{
  overflow: auto;
}
'CSS cel mdl grid

mdl-grid{
  overflow:auto;
}


'CSS de los botones del modal y el form principal
#sample5{
  width: 100%;
  height: 100%;
}
#btnGuardar{
  width: 100%;
}

'Tabs CSS config
.page-content{
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Primer formulario antes de motrar el Modal de config. -->
<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--11-col">
        <!-- Select cliente -->
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select class="mdl-textfield__input" id="cleinte" name="cliente">
                <option></option>
                <option value="85">Lear Torres</option>
                <option value="87">PKC</option>
                <option value="89">Mahle</option>
                <option value="91">Rane</option>
                <option value="diesel">Diesel</option>
            </select>
            <label class="mdl-textfield__label" for="octane">Cliente:</label>
        </div>
        <!-- Select contacto -->
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select class="mdl-textfield__input" id="cleinte" name="cliente">
                <option></option>
                <option value="85">Carlos Santana</option>
                <option value="87">Flor Flores</option>
            </select>
            <label class="mdl-textfield__label" for="octane">Contacto:</label>
        </div>
    </div>
    <div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--11-col">
        <!-- Select Tip. Ops. -->
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select class="mdl-textfield__input" id="operacion" name="cliente">
                <option></option>
                <option value="hxh">Inspeccion</option>
                <option value="cxm">Retrabajo</option>
            </select>

            <label class="mdl-textfield__label" for="operacion">Tipo de operacion:</label>
        </div>

        <!-- Select Moneda -->
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select class="mdl-textfield__input" id="moneda" name="cliente">
                <option></option>
                <option value="mxn">Horas por horas</option>
                <option value="usd">Costo minimo</option>
                <option value="usd">Rate hora</option>
                <option value="usd">Por pieza</option>
            </select>
            <label class="mdl-textfield__label" for="moneda">Tipo de pago:</label>
        </div>

    </div>
    <div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--11-col">
        <!-- Select Moneda -->
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select class="mdl-textfield__input" id="moneda" name="cliente">
                <option></option>
                <option value="mxn">MXN</option>
                <option value="usd">USD</option>
            </select>
            <label class="mdl-textfield__label" for="moneda">Tipo de pago:</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="tpago">
            <label class="mdl-textfield__label" for="tpago">Terminos de pago:</label>
        </div>
    </div>
    <div class="mdl-layout-spacer"></div>
</div>
  
 
<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--11-col ">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea style="width:100%" class="mdl-textfield__input texto" type="text" rows= "3" id="sample5" ></textarea>
            <label class="mdl-textfield__label" for="sample5">Descripcion de los terminos:</label>
        </div>
    </div>
    <div class="mdl-layout-spacer"></div>
</div>
<!-- Termina el grid del formulario que se muestra primero -->  
<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--11-col ">
        <button id="show-modal-example" type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect">Configurar cotizacion</button>
    </div>
    <div class="mdl-layout-spacer"></div>
</div>
<p>
    <strong>NOTA: Algunas de las cotizaciones creadas solo podran ser modificadas por algun <em>Administrador (SysAdmin), gerente</em> o <em>Sub-Gerente.</em>
      </p></strong>

<dialog class="mdl-dialog" id="modal-example">
  <h7 class="mdl-dialog__title">Configurar cotizacion</h7>
    <div class="mdl-dialog__content">

        <form method="POST">

            <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
            <div class="mdl-tabs__tab-bar">
                <a href="#pay-details" class="mdl-tabs__tab is-active"><i class="material-icons">attach_money</i>Conseptos de pago</a>
                <a href="#num-part" class="mdl-tabs__tab"><i class="material-icons">inbox</i>Numero de parte</a>
            </div>

                <div class="mdl-tabs__panel is-active" id="pay-details">
                    <div class="page-content">
                      
                        <!-- Tab 1 form aqui -->
                        <div class="mdl-grid">
                            <div class="mdl-cell mdl-cell--8-col">
                             
                                <!-- Tabla para ver la lista de numeros de parte asignados -->
                                <div class="mdl-card__supporting-text">
                                  <button onclick="selectElementContents( document.getElementById('table-nopart') );" type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">
file_copy
</i>Copiar texto</button>
                                    <table id="table-nopart" class="mdl-data-table mdl-js-data-table mdl-shadow--1dp">
                                        <tr>
                                            <th class="mdl-data-table__cell--non-numeric">Nombre</th>
                                            <th class="mdl-data-table__cell--non-numeric">Cantidad</th>
                                            <th class="mdl-data-table__cell--non-numeric">Precio</th>
                                            <th class="mdl-data-table__cell--non-numeric">Subtotal</th>
                                            <th>&nbsp;</th>
                                        </tr>
                                        <tr>
                                            <td class="mdl-data-table__cell--non-numeric">Hrs. Supervisor</td>
                                            <td class="mdl-data-table__cell--non-numeric">200 Hrs.</td>
                                            <td class="mdl-data-table__cell--non-numeric">$45 MXN</td>
                                            <td class="mdl-data-table__cell--non-numeric">$9,000 MXN</td>
                                            <td><a href="N3843-3 seleccionado">Edit</a></td>
                                        </tr>
                                        <tr>
                                            <td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
                                            <td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
                                            <td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
                                            <td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
                                            <td><a href="43254-655 seleccionado">Edit</a></td>
                                        </tr>
                                      <tr>
                                            <td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
                                            <td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
                                            <td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
                                            <td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
                                            <td><a href="43254-655 seleccionado">Edit</a></td>
                                        </tr>
                                      <tr>
                                            <td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
                                            <td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
                                            <td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
                                            <td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
                                            <td><a href="43254-655 seleccionado">Edit</a></td>
                                        </tr>
                                        <tr>
                                            <td class="mdl-data-table__cell--non-numeric">Tiempo extra</td>
                                            <td class="mdl-data-table__cell--non-numeric">12 Hrs.</td>
                                            <td class="mdl-data-table__cell--non-numeric">$40 MXN</td>
                                            <td class="mdl-data-table__cell--non-numeric">$480 MXN</td>
                                            <td><a href="SVG-354 seleccionado">Edit</a></td>
                                        </tr>
                                        <tr>
<td class="mdl-data-table__cell--non-numeric">Costo por pieza</td>
<td class="mdl-data-table__cell--non-numeric">40,0000</td>
<td class="mdl-data-table__cell--non-numeric">$35 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$1,400,000 MXN</td>
<td><a href="Costo x pz seleccionado">Edit</a></td>
                                          
                                      </tr>
                                    </table>
                                </div>
                                
                            </div>
                            <div class="mdl-cell mdl-cell--4-col">
                               <!-- Select cliente -->
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                    <select class="mdl-textfield__input" id="cleinte" name="cliente">
                                        <option></option>
                                        <option value="hi">Hrs. Inspector</option>
                                        <option value="hs">Hrs. Supervisor</option>
                                        <option value="te">Tiempo extra</option>
                                        <option value="tm">Tiempo muerto</option>
                                        <option value="cm">Costo minimo</option>
                                        <option value="cxp">Costo por pieza</option>
                                        <option value="trs">Transporte</option>
                                        <option value="otr">Otro</option>
                                    </select>
                                    <label class="mdl-textfield__label" for="octane">Consepto:</label>
                                </div>
                              
                              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                    <input class="mdl-textfield__input" type="text" id="txt_pz">
                                    <label class="mdl-textfield__label" for="txt_pz">Nombre:</label>
                                    <span class="mdl-textfield__error">No es un nombre valido</span>
                                </div>

                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                    <input class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?" type="text" id="txt_pz">
                                    <label class="mdl-textfield__label" for="txt_pz">Cantidad:</label>
                                    <span class="mdl-textfield__error">Este campo es numerico</span>
                                </div>
                              
                              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                    <input class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?" type="text" id="txt_pz">
                                    <label class="mdl-textfield__label" for="txt_pz">Precio:</label>
                                    <span class="mdl-textfield__error">Este campo es numerico</span>
                              </div>
                              <button id="btnGuardar" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-list__item-primary-action"><i class="material-icons">
save_alt
</i>Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mdl-tabs__panel" id="num-part">
<div class="mdl-grid">
    
</div>
                </div>
            </div>
            <div class="mdl-dialog__actions">
        <button id="btn_cerrar" type="button" class="mdl-button mdl-js-ripple-effect"><i class="material-icons">save_alt</i>Guardar</button>
        <button id="btn_guardar" type="button" class="mdl-button mdl-js-ripple-effect"><i class="material-icons">close</i>Cerrar</button>
    </div>
        </form>
      
    </div>
    
    
</dialog>