[SOLUCIONADO] Problemas definiendo ancho de etiqueta.

Hola, estoy teniendo problemas para definir el layout de un formulario a través del método generar_layout.
Inicialmente, tenía el layout definido como se vé en la primer imagen adjunta, pero todas las etiquetas se configuraban de igual forma a 150px, según se definió para el formulario.
Intenté un nuevo acercamiento, extendiendo el formulario, con el siguiente código, de forma tal de cambiar el ancho de la etiqueta del ef(‘foto’):


<?php
class formulario_docentes extends toba_ei_formulario
{
	function generar_layout()
	{
		echo "<table style=''><tbody>
				<tr>
            		<td>";
		$this->generar_html_ef('legajo');
		echo "		</td>
            		                <td style='text-align: left;' rowspan='12'>";
		$this->generar_html_ef('foto_vista_preliminar');
//codigo alternativo que produce el mismo resultado que la línea inmediata anterior
//					$id_ef = $this->_elemento_formulario['foto_vista_preliminar']->get_id_form();
//					echo "<div id='cont_$id_ef' style='margin-left:{$this->_ancho_etiqueta};'>";
//					$this->generar_etiqueta_ef('foto_vista_preliminar', '60px');
//					$this->generar_input_ef('foto_vista_preliminar');
//					echo '</div>';
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
        $this->generar_html_ef('apellido');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
        $this->generar_html_ef('nombre');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('id_documento_tipo');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('documento_nro');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('cuil');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('fecha_nacimiento');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('id_nacimiento_localidad');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('id_nacionalidad');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('id_estado_civil');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('comentarios');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('fecha_ingreso_upso');
		echo "		</td>
				</tr>
        		<tr>
            		<td>";
		$this->generar_html_ef('antiguedad');
        echo "		</td>
					<td style='text-align: left;'>";
					$id_ef = $this->_elemento_formulario['foto']->get_id_form();
					echo "<div id='cont_$id_ef' style='margin-left:{$this->_ancho_etiqueta};'>";
					$this->generar_etiqueta_ef('foto', '60px');
					$this->generar_input_ef('foto');
					echo '</div>';
   		echo "		</td>
						</tr></tbody></table>";
	}
}
?>

El mismo “funciona”, es decir, me muestra la etiqueta pegada al ef (pero en realidad, creo que no me está tomando el ancho, ya que no importa que valor le ingrese, solo pega la etiqueta al ef… $this->generar_etiqueta_ef(‘foto’, ‘60px’); está bien???)

Sin embargo, como se puede ver en la segunda imagen adjunta, sigue estando la foto separada del resto de los ef, siendo a ojo una distancia aparente de 150px. Es decir, reserva igual el lugar por defecto, más allá de que las 2 celdas definidas en esa columna deberían tener un ancho de 60px (el ef_fijo no tiene etiqueta definida, pero se agregó por si ese era el error).

La definición del ancho del formulario está en blanco y la del ci contenedor es del 100%.

Mil gracias por cualquier recomendación o sugerencia, incluso sobre si este es el correcto acercamiento para cambiar el ancho de esa sola etiqueta, o hay algo más “eficiente” que me permita seguir definiendo el layout visualmente en el Editor.


Mirá quizás te sirva pero a la función generar_html la podes llamar así:
$this->generar_html(‘nombre_ef’, ‘ancho’)

Donde ancho puede ser cualquier valor por ejemplo podés usarla así: $this->generar_html(‘ef_foto’, ‘200px’);
Eso lo podés hacer para cada ef que vallas generando el html.

Espero que te sirva

Hola… gracias… pero te hago una consulta…

No tengo el framework disponible como para probarlo, pero se me ocurre que eso va a limitar el ancho de todo el campo (etiqueta+ef), no solo la etiqueta… puede ser?

De paso, hay forma de agrandar el input del ef_upload para que sea más ancho?

Hola Martín!

Creo que es solo el ancho la etiqueta, de todas formas llegado el caso siempre tenés las posibilidad de modificar esas cosas via CSS, por ej


#cuerpo_js_form_1000175_form .ei-form-etiq {
	width: 300px;
}

De paso, hay forma de agrandar el input del ef_upload para que sea más ancho?
Particularmente el es un poco mañero para estilisar http://www.quirksmode.org/dom/inputfile.html

Bien… me gusta más a través de CSS, pero puedo afectar solo el ef que quiero? o todos los efs del formulario? Si se puede, entonces extiendo el formulario y en js modifico el css de ese ef en particular?

En el ejemplo que puse afecta a todos los efs de ese formulario en particular. En CSS existe una forma de apuntar a toda una clase (.algo, en este caso .ei-form-etiq), a un id particular (#id) o a ‘hijos de’ que es el ejemplo que puse.

Entonces la regla ‘#cuerpo_js_form_1000175_form .ei-form-etiq’ se lee como:
‘Los tag que tienen como clase a ei-form-etiq que se encuentran dentro de un tag que tiene como id a cuerpo_js_form_1000175_form

De donde saco cuerpo_js_form_1000175_form? Mirando el código fuente y buscando un tag con id que englobe a lo que querés modificar, usando el inspect de firebug o similar se hace más fácil. En este caso el tag en cuestión es el comienzo del cuerpo de ese formulario puntual, con lo que la regla solo afecta a los efs de ese formulario. Si en cambio querés apuntar a un ef particular sería algo como, teniendo en cuenta que el id varía segun el form/ef:


#nodo_ef_form_1561_formularioarchivo .ei-form-etiq {
  ....
}

Si se puede, entonces extiendo el formulario y en js modifico el css de ese ef en particular?
No te lo recomniendo, directamente mete la regla debidamente comentada en el www/toba.css de tu proyecto

Hola Martin,

una opcion extra que tenes… sobre todo ya que tenes redefinido el layout es usar toba_ei_formulario::set_ancho_etiqueta(), con ese metodo podes setear el ancho de la etiqueta en lo que vos quieras justo antes de hacer la llamada a $this->generar_html_ef(‘foto’); , de esa forma solo afectarias a ese EF y el resto ni se enteran.

Saludos
Richard

Impecable… tome la opción de Richard ya que era la más sencilla desde donde estaba. Hay que tener en cuenta que el ef(‘foto’), era el último.
Mil gracias a todos!!!