Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!-- 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="LearT">Lear Torres</option>
                <option value="PKC">PKC</option>
                <option value="Mahle">Mahle</option>
                <option value="Rane">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="CS">Carlos Santana</option>
                <option value="FF">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 rate:</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 moneda:</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-cell mdl-cell--10-col ">
        <div style="width:100%" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea class="mdl-textfield__input texto" type="text" rows= "3" id="textarae_description" ></textarea>
            <label class="mdl-textfield__label" for="textarae_description">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></strong></p>
<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 type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">note_add</i>Nuevo</button>
                                  <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</button>
                                  <button type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">delete</i>Borrar</button>
                                    <table id="table-pagos" 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">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">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">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">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 style="background:#dedfe0" 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="page-content">
                        <div class="mdl-grid">
                            <div class="mdl-layout-spacer"></div>
                            <div class="mdl-cell mdl-cell--5-col mdl-grid-table">
                                <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>&nbsp;</th>
                                        </tr>
                                        <tr>
                                            <td class="mdl-data-table__cell--non-numeric">980987ESDF-435DSGFDFG-3245ED</td>
                                            <td class="mdl-data-table__cell--non-numeric">3,000 pz</td>
                                            <td><a href="N3843-3 seleccionado">Edit</a></td>
                                        </tr>
                                    </table>
                            </div>
                            <div class="mdl-cell mdl-cell--7-col">
                                <div class="mdl-grid" id="grid-nopart">
                                    <div class="mdl-cell mdl-cell--8-col">
                                        <!-- Campo para ingresar el nombre -->
                                        <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>
                                    <div class="mdl-cell mdl-cell--4-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_pz" disabled>
                                            <label class="mdl-textfield__label" for="txt_pz">Imagen:</label>
                                            <span class="mdl-textfield__error">No es un nombre valido</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mdl-grid">
                                    <div class="mdl-cell mdl-cell--7-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_nopart">
                                            <label class="mdl-textfield__label" for="txt_nopart">Numero de parte:</label>
                                            <span class="mdl-textfield__error">No es un nombre valido para un numero de parte</span>
                                        </div>
                                    </div>
                                    <div class="mdl-cell mdl-cell--5-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_nopart">
                                            <label class="mdl-textfield__label" for="txt_nopart">Fecha de material limpio:</label>
                                            <span class="mdl-textfield__error">Formato de fecha no compatible dd/mm/YYYY</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mdl-grid">
                                    <div class="mdl-cell mdl-cell--6-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_nopart">
                                            <label class="mdl-textfield__label" for="txt_nopart">Tipo de contenedor:</label>
                                            <span class="mdl-textfield__error">Ingrese un nombre apropiado para el contenedor</span>
                                        </div>
                                    </div>
                                    <div class="mdl-cell mdl-cell--6-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_nopart">
                                            <label class="mdl-textfield__label" for="txt_nopart">Pz. del contenedor:</label>
                                            <span class="mdl-textfield__error">Solo pueden ingresarse digitos</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mdl-grid">
                                    <div class="mdl-cell mdl-cell--4-col">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <input class="mdl-textfield__input" type="text" id="txt_rate">
                                            <label class="mdl-textfield__label" for="txt_arte">Rate:</label>
                                            <span class="mdl-textfield__error">Solo pueden ingresarse digitos</span>
                                        </div>
                                    </div>
                                    <div class="mdl-cell mdl-cell--4-col">
                                        <!-- Select Moneda -->
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                            <select class="mdl-textfield__input" id="moneda" name="unit-rate">
                                                <option></option>
                                                <option value="mxn">Horas</option>
                                                <option value="usd">Minuto</option>
                                                <option value="usd">Segundo</option>
                                            </select>
                                            <label class="mdl-textfield__label" for="unit-rate">Unidad rate:</label>
                                        </div>
                                    </div>
                                    <div class="mdl-cell mdl-cell--4-col">
                                        <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "checkbox2">
                                            <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                                            <span class = "mdl-checkbox__label">Mostrar rate</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="mdl-grid">
                                    <div class="mdl-cell mdl-cell--6-col">
                                        <button style="width:100%; background:#dedfe0" id="btn_edit-nopart" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-list__item-primary-action"><i class="material-icons">settings</i>Editar detalles</button>
                                    </div>
                                    <div class="mdl-cell mdl-cell--6-col">
                                        <button style="width:100%; background:#dedfe0" id="btn_guardar-nopart" type="button" 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 class="mdl-layout-spacer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mdl-dialog__actions">
                <button style="background:#dedfe0" id="btn_cerrar" type="button" 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>
                <button style="background:#dedfe0" id="btn_guardar" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-list__item-primary-action"><i class="material-icons">close</i>Cerrar</button>
            </div>
        </form>
    </div>
</dialog>
  
<!-- Segundo dialog para mostrar despues del primero -->
<dialog class="mdl-dialog" id="modal-settings">
    <h7 class="mdl-dialog__title">Editar numero de parte</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="#defectos" class="mdl-tabs__tab is-active"><i class="material-icons">attach_money</i>Defectos</a>
                    <a href="#campos" class="mdl-tabs__tab"><i class="material-icons">inbox</i>Campos</a>
                    <a href="#editor" class="mdl-tabs__tab"><i class="material-icons">format_paint</i>Editor de imagenes</a>
                </div>

                <div class="mdl-tabs__panel is-active" id="defectos">
                    <!-- Inicia el formulario de defectos -->
                    <div class="mdl-grid">
                        <div class="mdl-layout-spacer"></div>
                        <div class="mdl-cell mdl-cell--6-col">
                        <!--Inicia la tabla de lista de los defectos -->
                        <table style="width:100%" id="table-defectos" 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">Estatus</th>
                                <th>&nbsp;</th>
                            </tr>
                            <tr>
                                <td class="mdl-data-table__cell--non-numeric">Short Shot</td>
                                <td class="mdl-data-table__cell--non-numeric">Activo</td>
                                <td><a href="N3843-3 seleccionado">Borrar</a></td>
                            </tr>
                        </table>
                        <!-- termina la tabla de defectos -->
                        </div>
                        <div class="mdl-cell mdl-cell--6-col">
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--9-col">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <input class="mdl-textfield__input" type="text" id="txt_defecto">
                                        <label class="mdl-textfield__label" for="txt_defecto">Defecto:</label>
                                        <span class="mdl-textfield__error">Este campo es obligatorio</span>
                                    </div>
                                </div>
                              
                                <div class="mdl-cell mdl-cell--3-col">
                                    <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "defecto-activo">
                                        <input type = "checkbox" id = "defecto-activo" class = "mdl-checkbox__input">
                                        <span class = "mdl-checkbox__label">Activo</span>
                                    </label>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <input class="mdl-textfield__input" type="text" id="txt_nombre-reporte">
                                        <label class="mdl-textfield__label" for="txt_nombre-reporte">Nombre en reporte:</label>
                                        <span class="mdl-textfield__error">Este campo es obligatorio</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <div style="width:100%" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <textarea class="mdl-textfield__input texto" type="text" rows= "3" id="textarae_defecto-descrip" ></textarea>
                                        <label class="mdl-textfield__label" for="textarae_defecto-descrip">Descripcion del defecto:</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <!-- Boton de guardado de defectos -->
                                    <button style="width:100%; background:#dedfe0" id="btn_save-defect" type="button" 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>
                                    <!-- Boton de guardado de defectos -->
                                </div>
                            </div>
                        </div>
                        <div class="mdl-layout-spacer"></div>
                    </div>
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col">
                            
                        </div>
                    </div>
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col">
                            
                        </div>
                    </div>
                    <!-- Termina el formulario de defectos -->
                </div>
                <div class="mdl-tabs__panel" id="campos">
                    <!-- Inicia formulario para Campos  -->
                    <div class="mdl-grid">
                        <div class="mdl-layout-spacer"></div>
                        <div class="mdl-cell mdl-cell--6-col">
                            <!--Inicia la tabla de lista de los defectos -->
                            <table style="width:100%" id="table-defectos" 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">Estatus</th>
                                    <th>&nbsp;</th>
                                </tr>
                                <tr>
                                    <td class="mdl-data-table__cell--non-numeric">Caparazon</td>
                                    <td class="mdl-data-table__cell--non-numeric">Activo</td>
                                    <td><a href="N3843-3 seleccionado">Borrar</a></td>
                                </tr>
                            </table>
                            <!-- termina la tabla de defectos -->
                        </div>
                        <div class="mdl-cell mdl-cell--6-col">
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--9-col">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <input class="mdl-textfield__input" type="text" id="txt_defecto">
                                        <label class="mdl-textfield__label" for="txt_defecto">Campo:</label>
                                        <span class="mdl-textfield__error">Este campo es obligatorio</span>
                                    </div>
                                </div>
                              
                                <div class="mdl-cell mdl-cell--3-col">
                                    <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "field-activo">
                                        <input type = "checkbox" id = "field-activo" class = "mdl-checkbox__input">
                                        <span class = "mdl-checkbox__label">Activo</span>
                                    </label>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <input class="mdl-textfield__input" type="text" id="txt_nombre-reporte-field">
                                        <label class="mdl-textfield__label" for="txt_nombre-reporte-field">Nombre en reporte:</label>
                                        <span class="mdl-textfield__error">Este campo es obligatorio</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <!-- Select para el tipo de campo -->
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                    <select class="mdl-textfield__input" id="cleinte" name="cliente">
                                        <option></option>
                                        <option value="LearT">Texto</option>
                                        <option value="PKC">Numerico</option>
                                        <option value="Mahle">Decimal</option>
                                        <option value="Rane">Fecha</option>
                                    </select>
                                    <label class="mdl-textfield__label" for="octane">Tipo de dato:</label>
                                  </div>
                                    <!-- termina el Select para el tipo de campo -->
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <div style="width:100%" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                        <textarea class="mdl-textfield__input texto" type="text" rows= "3" id="textarae_field-descrip" ></textarea>
                                        <label class="mdl-textfield__label" for="textarae_field-descrip">Descripcion del campo:</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mdl-grid">
                                <div class="mdl-cell mdl-cell--12-col">
                                    <!-- Boton de guardado de defectos -->
                                    <button style="width:100%; background:#dedfe0" id="btn_save-field" type="button" 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>
                                    <!-- Boton de guardado de defectos -->
                                </div>
                            </div>
                        </div>
                        <div class="mdl-layout-spacer"></div>
                    </div>
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col">
                            
                        </div>
                    </div>
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col">
                            
                        </div>
                    </div>
                    <!-- Termina formulario para Campos -->
                </div>
                <div class="mdl-tabs__panel" id="editor">
                    <!-- Inicia formulario para el editor de imagenes --> 
                    <div class="mdl-grid">
                        <div class="mdl-layout-spacer"></div>
                        <div class="mdl-cell mdl-cell--12-col">
                            <p>Aqui va un editor de imagenes bien chido.
                              asi bien cabron como el dios de los editores de imagenes, Paint</p>
                        </div>
                        <div class="mdl-layout-spacer"></div>
                    </div>
                    <!-- Terminar el formulario del editor de imagenes -->
                </div>
            </div>
            <div class="mdl-dialog__actions">
                <button style="background:#dedfe0" id="btn_cerrar-settings" type="button" 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>
                <button style="background:#dedfe0" id="btn_guardar-settings" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-list__item-primary-action"><i class="material-icons">close</i>Cerrar</button>
            </div>
        </form>
    </div>
</dialog>
            
          
!

CSS

            
              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-pagos, table#table-nopart {
    border-collapse: collapse;   
}
#table-pagos tr, #table-nopart tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#table-pagos tr:hover, #table-nopart tr:hover {
    background-color: #ccc;
}
#table-pagos th, #table-nopart th {
    background-color: #fff;
}
#table-pagos th, #table-nopart td {
    padding: 3px 5px;
}
#table-pagos td:hover, #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;
}
.mdl-grid-table{
  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;
}

'CSS para los input field del formulario de numeros de parte
#txt_nopart{
  width:100%;
}
.mdl-grid #grid-nopart{
  'overflow:auto;
}
.mdl-textfield__input{
  width:100%;
}

#textarae_description{
  width: 100%;
}
            
          
!

JS

            
              /* 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();
    }
}

/* Tabla del segundo TAB de numeros de parte */

$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
 
    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );


/* funciones del segundo modal puesto despues del primero */
(function() {
        'use strict';
        var dialog = document.querySelector('#modal-settings');
        var closeButton = dialog.querySelector('#btn_cerrar-settings');
        var showButton = document.querySelector('#btn_edit-nopart');
        var saveButton = dialog.querySelector('#btn_guardar-settings');
        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);
    }());
            
          
!
999px

Console