Add div around an input field

[gmclelland]

Hello, I’m trying to add a div around an input field but can’t seem to get it.  Can someone see what I'm doing wrong ?

I don't get any errors, but the div isn't shown either when rendered.

        $field = new InputfieldURL();
        $field->set('name', $this->attr('name'));
        $field->set('value', $this->attr('value'));
        $field->set('class', 'InputfieldAssistedURL');
        $field->prependMarkup = '<div class="InputfieldAssistedURLWrapper">';
        $field->appendMarkup = '</div>';

 

[Robin S]

I believe the code you're showing there comes from the render() method of InputfieldAssistedURL.module

If you want to modify the module directly you would need to add a construct() method to set the prependMarkup and appendMarkup properties.

public function __construct() {
    parent::__construct();
    $this->prependMarkup = '<div class="InputfieldAssistedURLWrapper">';
    $this->appendMarkup = '</div>';
}

But probably better not to modify the module and rather set your custom properties in a hook. In /site/ready.php:

$this->addHookBefore('InputfieldAssistedURL::render', function($event) {
    $inputfield = $event->object;
    $inputfield->prependMarkup = '<div class="InputfieldAssistedURLWrapper">';
    $inputfield->appendMarkup = '</div>';
});

 

[gmclelland]

Thank you @Robin S.  Yes, that code I showed is coming from the render method.  

I tried your code, but it added a div around the input field and the button html tags.  I'm trying to just add the div around the input html tag itself.

My ultimate goal was to fix the styling of the module and submit a patch or PR back to the project.  Here is the issue I'm talking about https://github.com/marcostoll/processwire-fieldtype-assisted-url/issues/2

[Robin S]

2 minutes ago, gmclelland said:

My ultimate goal was to fix the styling of the module and submit a patch or PR back to the project.  Here is the issue I'm talking about https://github.com/marcostoll/processwire-fieldtype-assisted-url/issues/2

I see. The fix for that is nice and easy - remove this: https://github.com/marcostoll/processwire-fieldtype-assisted-url/blob/master/InputfieldAssistedURL.css#L6

[gmclelland]

Yes, that is what I noticed.  To fix it, I thought about using this technique to keep the button next to 100% width input... https://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/

In order to do that, I need to add the div around the input field.

[gmclelland]

I also tried this, but it didn't work either

        $field = new InputfieldURL();
        $field->set('name', $this->attr('name'));
        $field->set('value', $this->attr('value'));
        $field->set('class', 'InputfieldAssistedURL');
        $field->set('prependMarkup','<div class="InputfieldAssistedURLWrapper">');
        $field->set('appendMarkup','</div>');

 

[Robin S]

Thanks, I see now what the module author was trying to do. The problem is the CSS targets the wrapping list item as well as the text input.

For a basic fix you can just change the CSS file so it consists only of:

li.InputfieldAssistedURL input[type="text"] { width:75%; }

Or you could add some wrapping divs in the render method that would let you achieve more precise styling:

public function ___render()
{
	$field = new InputfieldURL();
	$field->set('name', $this->attr('name'));
	$field->set('value', $this->attr('value'));
	$field->set('class', 'InputfieldAssistedURL');

	$btn = $this->modules->get('InputfieldButton');
	$btn->attr('id', $this->attr('name') . "_assistedurl_open");
	$btn->attr('data-page-id', $this->page->id);
	$btn->class .= " InputfieldAssistedURLOpen";
	$btn->icon = 'link';
	$btn->value = '';

	$out = '<div class="InputfieldAssistedUrlButton">' . $btn->render() . '</div>';
	$out .= '<div class="InputfieldAssistedUrlText">' . $field->render() . '</div>';
	return $out;
}

.InputfieldAssistedUrlButton { float:left; width:60px; }
.InputfieldAssistedUrlText { margin-left:60px; padding-top:6px; }

Edited October 8, 2016 by Robin S
Added CSS and screenshot.

[gmclelland]

That's a good work-a-round.  It worked.  Thank you for all the help.