Change label position in Inputfield

[Marco Ro]

Hi,

I need to change the position of the label tag. In all render the input field look like this:

<div class="Inputfield" id="">
  <label class="InputfieldHeader" for="...">Email</label>
  <div class="InputfieldContent">
    <input id="..." name="..." class="..." type="" maxlength="512" autocomplete="off">
  </div>
</div>

I would like move the label tag inside the InputfieldContent after the input tag.

I try to work around the render hook, but didn't found a solution, and also I'm not sure is this the way. 

How can I do it?

Thank you.

[ottogal]

Hi Marco Ro,

51 minutes ago, Marco Ro said:

I need to change the position of the label tag. In all render the input field look like thisI would like move the label tag inside the InputfieldContent after the input tag.

Just move it where you want to have it:

<div class="Inputfield" id="">
  <div class="InputfieldContent">
    <input id="42" name="..." class="..." type="" maxlength="512" autocomplete="off">
	<label class="InputfieldHeader" for="42">Email</label>
  </div>
</div>	

Through the for attribute you assign the label to the wanted input element, refering to its id (here 42).

That said, you should consider to avoid additional div elements and just use the semantic elements:

    <input id="42" name="..." class="Inputfield" type="" maxlength="512" autocomplete="off">
	<label for="42">Email</label>

This might be sufficient - of course that depends on your special use case...

 

[Marco Ro]

Thank you @ottogal, yes this could be a solution, but I have make one like of code for every input. I will like have this render for all the input. For this reason I was thinking of a hook solution on Inputfield. 

 

[dragan]

@Marco Ro Why do you want to change that? And what's the situation? Do you use PW's inputfield form to create forms in the frontend? Do you want to re-style the labels and/or input fields? Maybe there's a CSS solution? Or is this even something from FormBuilder?

[Marco Ro]

Hi @dragan thank you, yes I need this for make a re-style of css, I use the field in the module LoginRegister and Padloper, all of these render directly the Inputfield.

I can't find a solution only with the css, I need to move the tag label because it has to work inside the InputfieldContent. I need move the text label inside the input, when write inside the input the label text will be smaller and move across the InputfieldContent box. 

I try to use the appendTo(), but without using a unique ID or class it doesn't work well. I also try to use the placeholder attribute, but doesn't work like we would like.

I never use the FormBuilder module, I read that is very nice module and sure I can make every contact form that I need, included the login form, but in this way I have also to write all the system for the login form like the registration, the forget password etc.. Also I probably I can't use FormBuilder with Padloper module. 

There are no way to move the label inside the InputfieldContent? 

 

 

 

[dragan]

@Marco Ro If you would draw a little sketch, and show exactly what you want to do, and how it's supposed to look like visually (it's still not clear to me from your description), maybe there is a way with CSS only. And perhaps also show what it looks out now, out of the box, for comparison.

e.g. if all you want is to place the label on the left, and the input on the right, you could do it easily with flexbox: https://codepen.io/dragan1700/pen/JjdRYVE

[Robin S]

@Marco Ro, you can use InputfieldWrapper::setMarkup() to customise the markup of inputfields.

See the defaultMarkup property as a starting point for what can be customised:

/**
 * Markup used during the render() method - customize with InputfieldWrapper::setMarkup($array)
 *
 */
static protected $defaultMarkup = array(
	'list' => "<ul {attrs}>{out}</ul>",
	'item' => "<li {attrs}>{out}</li>", 
	'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
	'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
	'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>", 
	'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
	'item_description' => "<p class='description'>{out}</p>", 
	'item_head' => "<h2>{out}</h2>", 
	'item_notes' => "<p class='notes'>{out}</p>",
	'item_detail' => "<p class='detail'>{out}</p>", 
	'item_icon' => "<i class='fa fa-fw fa-{name}'></i> ",
	'item_toggle' => "<i class='toggle-icon fa fa-fw fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
	// ALSO: 
	// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
	);

There are still some limitations (e.g. item_label is always rendered before item_content) but you can get closer to what you want like so:

InputfieldWrapper::setMarkup([
	'list' => "<div {attrs}>{out}</div>",
	'item' => "<div {attrs}><div class='InputfieldContent'>{out}</div></div>",
	'item_label' => "<label class='{class}' for='{for}'>{out}</label>",
	'item_content' => "{out}",
	'item_toggle' => "",
]);

$form = $modules->InputfieldForm;

$f = $modules->InputfieldText;
$f->name = 'greeting';
$f->label = 'Greeting';
$form->add($f);

$f = $modules->InputfieldSubmit;
$form->add($f);

echo $form->render();

 

11 hours ago, Marco Ro said:

I need move the text label inside the input, when write inside the input the label text will be smaller and move across the InputfieldContent box. 

If I understand right you don't really need to change the markup to do this. The label element can never literally be inside the input element, but you can position it overlaying the input using CSS with the default markup.

.Inputfield { position:relative; }
.InputfieldHeader { position:absolute; left:5px; top:3px; font-size:12px; text-transform:uppercase; }
input[type=text] { padding:17px 5px 5px; border:1px solid #ccc; }
.InputfieldSubmit { margin-top:20px; }

If you want to change the label styling when the input is focused you can use some JS to add a class to the parent .Inputfield element when its child input is focused.

[Marco Ro]

Hi @Robin S and @dragan, sorry fro the late reply. 

Ok thank you! It's very nice, I can also use $defaultClasses to add class and not use jquery. 

About the css I find a solution and the result is very beautiful.

Thank you so much.