Jump to content

Add div around an input field


gmclelland
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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; }

assistedurl.png

Edited by Robin S
Added CSS and screenshot.
  • 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

  • Recently Browsing   0 members

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