2

tengo un problema con formularios y css…

El problema: Tengo un problema que no se como afrontar: Tenfo un formulario en el que el el input del checkbox hace que el label necesite un padding para no pisarse. Hasta aquí todo normal. Le he puesto un padding al lable y genial. El problmea está en que cuando el lable tiene un texto demasiado largo, la segunda línea hace caso omiso del padding y queda debajo del input, quedando feo (ajdunto foto pantalla).

introducir la descripción de la imagen aquí

La pregunta: Cómo puedo hacer para que la segunda línea del label quede alineada con la primera?

introducir la descripción de la imagen aquí

Complemento la info con el código html para que sea más fácil:

<p class="form-field email-pref pd-checkbox">
<input type="checkbox" name="list[]" id="list_27518" value="27518">&nbsp;<label class="inline" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés</label>
</p>

gracias!!!

1
  • 1
    Necesitaríamos ver los CSS que tienes y que afectan al input que sale en las imágenes que has subido. Cuanto más completo sea el código que subes más fácilmente se te podrá ayuda. Y si ya lo metes en el snipped que has subido mejor que mejor, así facilitarás un entorno de pruebas.
    – phpMyGuel
    Commented el 18 dic. 2018 a las 10:19

5 respuestas 5

2

Lo que podrías hacer es plantear tu HTML de otra manera para solucionar el problema que tienes. La solución que te doy pasa por separar en dos div el input y el label y repartir el 100% de la anchura de su padre entre ellos, así te saldrán en la misma fila pero respetando la altura que ocupa cada uno de ellos sin meterse el uno dentro del otro.

.input {
  width: 5%;
  float: left;
}

.label {
  width: 95%;
  float: left;
}
<div>
  <div class="input">
    <input type="checkbox" name="list[]" id="list_27518" value="27518">
  </div>
  <div>
    <label class="inline label" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés dcsads dasds saasd asdd dasasd dasdasd asddas</label>
  </div>
</div>

1
  • Mil gracias pero no me es posible modificar el html porque viene generado desde un php al cual no tengo acceso (es una herramienta CMS muy específica).No se podría hacer únicamente en css?
    – Bernat
    Commented el 20 dic. 2018 a las 16:38
1

La solución de @PHPMyguel es correcta. Una solución alternativa sería utilizar text-overflow: ellipsis; de esta manera:

label {
  display:inline-block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p class="form-field email-pref pd-checkbox">
<input type="checkbox" name="list[]" id="list_27518" value="27518">&nbsp;
  <label class="inline" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés</label>
</p>

1
  • Gracias pero lo que produce ese css es que corta la línea, y no es lo que yo necesito. Gracias igualmente ;-)
    – Bernat
    Commented el 20 dic. 2018 a las 16:39
1

Este es otro intento, aunque debo decirte que no me gusta lo de .input {width: 5%;... Necesitarás hacer algo más para pantallas pequeñas.

Espero que sea lo que necesites.

.input {
  width: 5%;
  float: left;
}

.label {
  box-sizing:border-box;
  width: 95%;
  float: left;
  padding:0;
}
<div>
  <div class="input">
    <input type="checkbox" name="list[]" id="list_27518" value="27518">
  </div>
  <div>
    <label class="inline label" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés dcsads dasds saasd asdd dasasd dasdasd asddas</label>
  </div>
</div>

1

Puedes usar float:left en el input y el label y a este último se le resta con calc el ancho del input:

.pd-checkbox {
  width: 400px;
  border: solid 1px red;
  overflow: hidden;
}

input {
  float: left;
}

label {
  float: left;
  width: calc(100% - 60px);
}
<p class="form-field email-pref pd-checkbox">
  <input type="checkbox" name="list[]" id="list_27518" value="27518">&nbsp;<label class="inline" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés</label>
</p>

También puedes usar flexbox, para mi la mejor opción. Para este caso concreto con darle display:flex al p que envuelve el input y el label es suficiente, también alinear los elementos arriba ya que por defecto se alinean al centro:

.pd-checkbox {
  width: 400px;
  border: solid 1px red;
  
  display: flex;
  align-items: flex-start;
}
<p class="form-field email-pref pd-checkbox">
  <input type="checkbox" name="list[]" id="list_27518" value="27518">&nbsp;<label class="inline" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés</label>
</p>

1

Prueba con este css. La medida 2em dependera de tu css concreto, igualmente tendrias que revisar que el selector sea unico (p.form-field.email-pref.pd-checkbox) para que no te rompa otros formularios.

p.form-field.email-pref.pd-checkbox{
padding-left:2em;
}
p.form-field.email-pref.pd-checkbox input[type='checkbox'] {
margin-left:-2em;
}
<p class="form-field email-pref pd-checkbox">
<input type="checkbox" name="list[]" id="list_27518" value="27518">&nbsp;<label class="inline" for="list_27518">Open Management Programs Worlwide / Programas para directivos en inglés</label>
</p>

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.