Inputfield rendering adds automatic wrapper style="width: ..." (LoginRegister)

[overoon]

Hi,

FIX IN POST BELOW

maybe someone can help me: i dont know if this is a Login/Register only related problem, but it has taken me a long time now researching and i still cant seem to find the snippet where this is executed:

when rendering the form with the Login/Register module, it automatically wraps the input field into a div with a certain width (most probably from the value set in the admin backend for displaying it there). since this is applied as element css i cant override it anyway.

can i somehow hook into the wrapping of all the individual elements to deactivate that (and apply different css for better looks)? hooking into the input field only allows me to manipulate exactly that (inputfields, submits, ... )

thanks!

 

[overoon]

Ok, so i kinda found now what was wrong: it all comes down to the default render() function and the process of building the registration form in the LoginRegister Module.

My fix starting at the function at line 537 of the module

foreach($registerFields as $fieldName) {
			if($fieldName == 'roles') continue;
			$field = $userTemplate->fieldgroup->getFieldContext($fieldName);
			if(!$field) continue;
			$inputfield = $field->getInputfield($nullPage);
			$inputfield->attr('id+name', 'register_' . $inputfield->attr('name'));
			$inputfield->columnWidth = 100;
			if($fieldName == 'email' || $fieldName == 'pass') $inputfield->required = true;
			if($inputfield->required && $inputfield instanceof InputfieldText) {
				$inputfield->attr('required', 'required');
			}
			$form->add($inputfield); 
		}

is the added

$inputfield->columnWidth = 100;

this auto defaults all input fields to have no style="width: ... " attribute added.

i still havent figured out, how i can add classes to the respective wrapper though -- so any help on that is still appreciated ?

Edited April 9, 2019 by overoon
resolved

[overoon]

Finally, found it ?

Just to finish this up: what i wanted was to use a foundation grid on my form to create custom grid solutions. this can be achieved by one pretty simple function (if you know which one ? )

$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->wrapClass = "small-12 medium-6";
$field->required = 1;
$form->append($field); // append the field

in this example i add "medium-6" to my email field so THE WRAPPER is only 50% wide (using foundation).

to achieve the grid stuff i put:

$markup = array(
	'list' => "<div {attrs}>{out}</div>",
	'item' => "<div {attrs}>{out}</div>",
	'item_label' => "<label class='InputfieldHeader' for='{for}'>{out}</label>",
	'item_label_hidden' => "<label class='InputfieldHeader'><span>{out}</span></label>",
	'item_content' => "<div class='InputfieldContent {class}'>{description}{out}{error}{notes}</div>",
	'item_error' => "<div class='LoginRegisterError'><small>{out}</small></div>",
	'item_description' => "<p class='description'>{out}</p>",
	'item_notes' => "<p class='notes'><small>{out}</small></p>",
	'success' => "<p class='LoginRegisterMessage'>{out}</p>",
	'error' => "<p class='LoginRegisterError'>{out}</p>",
	'item_icon' => "",
	'item_toggle' => "",
	'InputfieldFieldset' => array(
		'item' => "<fieldset {attrs}>{out}</fieldset>",
		'item_label' => "<legend>{out}</legend>",
		'item_label_hidden' => "<legend style='display:none'>{out}</legend>",
		'item_content' => "<div class='InputfieldContent'>{out}</div>",
		'item_description' => "<p class='description'>{out}</p>",
		'item_notes' => "<p class='notes'><small>{out}</small></p>",
	)
);

$classes = array(
	'form' => '', // 'InputfieldFormNoHeights',
	'list' => 'grid-x grid-padding-x',
	'list_clearfix' => '',
	'item' => 'Inputfield_{name} {class} cell',
	'item_required' => 'InputfieldStateRequired',
	'item_error' => 'InputfieldStateError',
	'item_collapsed' => 'InputfieldStateCollapsed',
	'item_column_width' => 'InputfieldColumnWidth',
	'item_column_width_first' => 'InputfieldColumnWidthFirst',
	'InputfieldFieldset' => array(
		'item' => 'Inputfield_{name} {class}',
	)
);

InputfieldWrapper::setMarkup($markup);
InputfieldWrapper::setClasses($classes);

Important: "List" gets classes grid-x so foundation turns the container into a grid container. then the elements below receive their classes as defined in wrap-class