Jump to content

Always text in label


Harmen
 Share

Recommended Posts

Hi all,

I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.

Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

e1ef4dc55d20797eadbe5b755f503124.png
I don't know how, but my icon is placed in the label, and that's not what I want.

My markup looks like this:

static protected $markup = array(
        'list' => "{out}\n",
        'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>",
        'item_label' => "<label class=input-group-addon>{out}</label>",
        'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>",
        'item_content' => "{out}",
        'item_error' => "\n<p class='field--error--message'>{out}</p>",
        'item_description' => "\n<p class='field__description'>{out}</p>",
		//.... etc
    );

and results in this:

<div class="form-group input-group">
	<label class="input-group-addon">
      	<span>
          	<i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
      	</span>
      	E-Mail
  	</label>
	<input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512">
</div>

 

and what I want is:

<div class="form-group input-group ">
        <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
        <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name">
</div>

The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....

Thanks in advance,

~Harmen

Link to comment
Share on other sites

Since bootstrap uses the input group addon to position the icon within the container, your code is also setting the label to email, which also appears. Removing the label entry should remove the text and leave the icon.

so 'item_label' => "<label class=input-group-addon>{out}</label>" should be 'item_label' => "<label class=input-group-addon></label>"

 

Link to comment
Share on other sites

Hello for all,

don't know If I understand You well, but if you are using PW inputfields (modules/API) to build form, than to remove label from some field need to do that in two small steps. First set field label as blank (""), and after it set option "skiplabel" to "true".

Example:

$myfield->label = '';
$myfield->skipLabel = true;

Regards.

Link to comment
Share on other sites

@fbg13:

// === The render method that links to the render form method
public function ___render(){
	return $this->renderForm();
}

// === The renderForm() method
protected function renderForm() {
	$form = $this->BuildForm();
	$form->setMarkup(self::$markup);

	// === Pressed submit?
	if ($this->input->post->submit){
		$form->processInput($this->input->post);

		if (!$form->getErrors()){
			if ($this->sendEmail == true){
				$text = 'Configure Email options' //to do
				
			}
		}
	}
	return isset($text) ? $text : $form->render();
}

// === Build Form Method
protected function BuildForm(){    
        $form = $this->modules->get('InputfieldForm');
        $form->method = 'post';
        $form->attr('id+name', 'rma-form');

        // === Add the fields to the form
        if (is_array($this->GeneralfieldsSelector)) {
            foreach($this->GeneralfieldsSelector as $fieldName){
                if ($field = $this->fields->get($fieldName)){
                    $input = $field->getInputfield($this->page);
                    $input->attr('class', 'form-control');
                    $input->skipLabel = true;
                    $form->append($input);
                }
            }
        }

        // === Submit button
        $submit = $this->modules->get('InputfieldSubmit');
        $submit->name = 'submit';
        $submit->attr('class', 'btn btn_default');
        $submit->attr('value', 'Send RMA request');
        $form->append($submit);

        return $form;
    }

I don't think the problem is in this piece of code, but maybe I've done something wrong......

// ======

@OLSA: I've tried that mate, but it doesn't work... Thanks for your comment though!

Link to comment
Share on other sites

Yep, these are modules like Batch Child Editor, Tracy Debugger, ReCaptcha and some custom made modules. 

But I don't think any of these modules conflict with the module I am working on now.

Link to comment
Share on other sites

With this markup and field options :

$markup = array(
	'list' => "{out}\n",
	'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>",
	'item_label' => "{out}",
	'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>",
	'item_content' => "{out}",
	'item_error' => "\n<p class='field--error--message'>{out}</p>",
	'item_description' => "\n<p class='field__description'>{out}</p>",
	'item_toggle' => ''

//.... etc
);


// field setup
$field->icon = 'envelope';
$field->label = ' ';

I get the following result :

<div class="form-group input-group">
	<span>
		<i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
	</span> 
	<input id="name" class="InputfieldMaxWidth" name="name" maxlength="2048" type="text">
</div>

 

Another idea could be to set the markup option of the label to something like {{replaceme}} {out} {{/replaceme}} and change those tags when you render the form with a str_replace or a custom function, you see ?

Link to comment
Share on other sites

I meant modules used to build the form.

$this->GeneralfieldsSelector I couldn't find this in the core, that's why I asked. 

'item_label' => "<label class=input-group-addon>{out}</label>",

Somewhere {out} gets replaced with

<span>
  <i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
</span>
E-Mail

You can find out where and edit/overwrite the default behavior or before you echo the form do a search and replace

str_replace( "E-Mail" , "" , $form )

Or you could just create the form yourself and have complete control over it.

Link to comment
Share on other sites

@fbg13, you're a real hero! :) 

EDIT: Uh, I meant also @flydev, your code did the trick. 

Now it looks like it should look! Thanks!

3421487a758e78b66d16388df0ae9bcb.png

I think the space between the ' ' did the trick, I am not sure but I will spend this evening to figure out what I did wrong.

 

13 hours ago, fbg13 said:

$this->GeneralfieldsSelector I couldn't find this in the core, that's why I asked. 

I am building this module to make the process for handling RMA's in my company easier. So I am creating a module and $this->GeneralfieldsSelector grabs all the fields that are selected in the module settings to show them on the frontend. I didn't want to build the form itself because maybe I will also release this module here on PW and than is this a bit better than a custom made HTML-form XD

Edited by Harmen
Forgot to tag someone
  • 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
 Share

×
×
  • Create New...