Jump to content

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


Recommended Posts



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, ... )




Link to comment
Share on other sites

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');

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 by overoon
Link to comment
Share on other sites

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->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}',


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


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...