elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  mostrar y ocultar elementos rompe el estilo
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: mostrar y ocultar elementos rompe el estilo  (Leído 1,495 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
mostrar y ocultar elementos rompe el estilo
« en: 8 Noviembre 2015, 18:28 »

Hola buenas, estoy teniendo problemas con el estilo css para mostrar y ocultar input text cuando se checkea un checkbox.

Tengo cuatro <li>, el primero y tercero son los checkboxes y el segundo y cuarto los input text. Necesito que esten alineados horizontalmente, pero que no se mueva nada al aparecer los input text los checkboxes no deben moverse y los input aparezcan a la derecha.

Código
  1. <ul>
  2.    <li style="margin-top: 9px;">
  3.        <input type="checkbox" id="price1" value="">
  4.        <label for="price1"><span></span>Se Vende</label>
  5.    </li>
  6.    <li class="price-1" style="display: none;">
  7.        <input type="text" placeholder="Precio de Venta" name="price[sale]" /> <span class="unit unit-2">&euro;</span>
  8.  
  9.    </li>
  10.    <li class="test">
  11.        <input type="checkbox" id="price2" value="">
  12.        <label for="price2"><span></span>Se Alquila</label>
  13.    </li>
  14.    <li class="price-2" style="display: none;">
  15.        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" /> <span class="unit unit-2">&euro;</span>
  16.  
  17.    </li>
  18. </ul>

Alomejor tengo que cambiar la estructura o es simplemente arreglando el css.

Aquí un link a fiddle: http://jsfiddle.net/nazu61p7/

Gracias!


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.562



Ver Perfil WWW
Re: mostrar y ocultar elementos rompe el estilo
« Respuesta #1 en: 8 Noviembre 2015, 19:43 »

Código
  1. <div id='type'>
  2.  
  3.    <div class='item'>
  4.        <input type='checkbox' id='price1' value=''>
  5.        <label for='price1'>Se Vende</label>
  6.        <div class='input hide'>
  7.            <input type='text' placeholder='Precio de Venta' name='price["sale"]'>
  8.            <span>&euro;</span>
  9.        </div>
  10.    </div>
  11.  
  12.    <div class='item'>
  13.        <input type='checkbox' id='price2' value=''>
  14.        <label for='price2'>Se alquila</label>
  15.        <div class='input hide'>
  16.            <input type='text' placeholder='Precio de Alquiler' name='price["rent"]'>
  17.            <span>&euro;</span>
  18.        </div>
  19.    </div>
  20.  
  21. </div>

Código
  1. #type {
  2.    max-width: 50%;
  3.    border: 1px solid #eee;
  4. }
  5.  
  6.    #type > .item {
  7.        display: block;
  8.        margin: 5px 0px;
  9.        padding: 9px 0px;
  10.    }
  11.  
  12.    #type > .item > .input { display: inline-block; }
  13.    #type > .item > .hide { visibility: hidden; }
  14.  
  15.    #type > .item > .input > input[type='text'] {
  16.        padding: 0.8em 1em;
  17.        font-size: 0.85em;
  18.        border: 1px solid #eee;
  19.        color: #a3a3a3;
  20.        background: white;
  21.        outline: none;
  22.        width: 50%;
  23.        -webkit-appearance: none;
  24.    }

Código
  1. $('#type :checkbox').change(function(){
  2.    $(this).parent('.item').find('.input').toggleClass('hide', (!$(this).is(':checked')));
  3. });

No te recomendaría usar listas para estas cosas y menos de la manera de la que lo estas haciendo. El código JS como ves se puede reducir muchísimo empleando toggleClass().

Demo
http://jsfiddle.net/drvy/md23r0jk/1/

PD: No uses estilos dentro del HTML, es feo y poco organizado.

Saludos


« Última modificación: 8 Noviembre 2015, 19:46 por #!drvy » En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mostrar y ocultar elementos rompe el estilo
« Respuesta #2 en: 8 Noviembre 2015, 21:12 »

Gracias por la ayuda y los consejos. Tengo que seguir estudiando mucho.

Una duda más, si quiero que haya la misma separación entre el label del checkbox y el div input, ¿cual sería la mejor manera? float left y margin-right pero no queda bien, estoy buscando una mejor manera... Lo facil para mi seria darle a cada .input un margen-left pero para hacerlo como me has enseñado
« Última modificación: 8 Noviembre 2015, 23:43 por gAb1 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines