1

tengo un problema con un dialog usando Material Design Lite, tengo unos tabs con formularios dentro pero por alguna razón cuando coloco elementos de mas dentro de el los botones de "Guardar" y "Cancelar" se salen de los limites del dialog como se muestra a continuación:

aquí adjunto el código fuente, espero que alguien pueda ayudarme a solucionar este problema, no se si sea por el CSS que lo tengo mal o el HTML

Edit1: disculpen olvide adjuntar el código https://codepen.io/fer626/pen/VxBzvY

agradezco su atención

1 respuesta 1

0

Aquí lo tienes, lo que he hecho es poner los botones dentro del <form>, body{display:inline-block} y .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>

1
  • muchas gracias, nunca me imagine que un simple form seria la solución :) el 14 may. 2018 a las 20:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.