0
210
Visualizações¿Por qué los botones de arranque adjuntos no están espaciados correctamente?
Actualmente estoy intentando usar jQuery para agregar varios botones en la parte inferior de un formulario. En un intento por mantener mi código algo limpio, estoy usando declaraciones document.createElement() para agregar los elementos al formulario, así:
//Form-footer is a container of buttons on the end of the form. $("#form-footer").append( $(document.createElement('button')) .prop({ class: "btn btn-success", id: "save-button" }) .html("Save") ) .append( $(document.createElement('button')) .prop({ class: "btn btn-secondary", id: "preview-button" }) html("Preview Report") )Sin embargo, noté un problema de estilo: mis botones terminan aplastados, sin el margen entre ellos.
Pude descubrir la causa del problema de estilo. Si bien la consola de desarrollo puede mostrar que los elementos están en nuevas líneas y con la sangría adecuada....
... En realidad, carecen de ambos, como puede ser revelado por 'Editar como Html':
La edición manual de este HTML para agregar nuevas líneas y sangría en la consola del desarrollador de Chrome soluciona el problema de estilo, pero eso obviamente no es útil en las aplicaciones de producción.
¿Por qué no agrega nuevas líneas para los elementos? ¿Qué debo hacer para obtener etiquetas adjuntas para tener nuevas líneas adecuadas en sus padres?
2 Respostas
Responde à pergunta0
¿Por que sucede?
Según tengo entendido, el $(document.createElement('div'))... es procesado por el .append contenedor como una cadena, o al menos, se comporta de manera bastante similar para el propósito de esta respuesta.
.append() , en esencia, concatenará el contenido de la etiqueta principal y la entrada en una sola cadena larga.
¿Cómo se puede arreglar?
Por eso, no se inserta un carácter de nueva línea entre los elementos adjuntos. Para insertar la nueva línea y corregir el estilo, use .append('\n') antes de agregar cualquier botón después del primero.
¿Por qué después del primero? Inspeccione el HTML de la pregunta: el primer botón ya está en una línea separada.
$("#form-footer") .append( $(document.createElement('button')) .prop({ className: "btn btn-success ml-1", id: "save-button" }) .html("Save") ) .append('\n') //Append a new line .append( $(document.createElement('button')) .prop({ className: "btn btn-secondary", id: "preview-button" }) .html("Preview Report") )0
Cambia esto:
class: "btn btn-success"a esto:
class: "btn btn-success ml-1"y usted debe ser bueno para ir.
Por defecto, no hay margen en los botones en Bootstrap.