[SOLVED] [Module] Form Style problem

[Crezzur.com]

SOLVED

 

I'm creating a module but for some reason my forms get tangled in each other.

Anyone with spare time could help me on the right track ?

 

The problem:

The Code:

	$url = $_SERVER['REQUEST_URI'];
        $features = $this->getUnassignedFeatures();
	$txt = '
	<script type="text/javascript" src="' . $this->_path . 'views/js/admin-products.js"></script>
	<div class="panel col-lg-12">
	<div class="panel-heading">'.$this->l('Create Group').'
				
	<span class="panel-heading-action">
	
	<a class="list-toolbar-btn" href="'.$url.'&fc_tab=">
	<span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="'.$this->l('Home').'" data-html="true" data-placement="left">
	<i class="icon-home"></i>
	</span>
	</a>
	
	<a class="list-toolbar-btn" href="javascript:location.reload();">
	<span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Ververs lijst" data-html="true" data-placement="left">
	<i class="process-icon-refresh"></i>
	</span>
	</a>
					
	</span>
	</div>
	
	<form id="product_form" name="product" action="' . $_SERVER['REQUEST_URI'] . '" method="post">
		
	<div class="form-group">
	<div class="col-lg-1"><span class="pull-right"></span></div>
		<label class="control-label col-lg-2" for="description_1">
		<span class="label-tooltip" data-toggle="tooltip" title="">'.$this->l('Group Name').'</span>
		</label>
	<div class="col-lg-5">
	<input type="text" id="name_1"	class="form-control updateCurrentText" name="name" value="'.(Tools::getValue('name','')).'"
	onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" onblur="updateLinkRewrite();" required="required"	/>		
	</div>
	</div>	
	
	<div class="form-group">
	<div class="col-lg-1"><span class="pull-right"></span></div>
		<label class="control-label col-lg-2" for="description_2">
			<span class="label-tooltip" data-toggle="tooltip" title="'.$this->l('Defines the order of groups').'">
			'.$this->l('Priority').'</span>
		</label>
	<div class="col-lg-2">
		<select name="priority" id="priority">';
	foreach (range(1, 50) as $val) {
	$txt .= '<option value="' . $val . '">' . $val . '</option>';
	}
	$txt .= '</select>	
	</div>
	</div>	

	<div class="form-group">
	<div class="col-lg-9 col-lg-offset-3">
	<div class="row">
	<div class="col-lg-6"><p>'.$this->l('Available attachments:').'</p>
	<select multiple="multiple" id="availableItems" style="height: 160px;">';
	foreach ($features as $attach) {
$txt .= '
		<option value="'.$attach['id_feature'].'">'.$attach['name'].'</option>';
	}
$txt .= '
	</select>
	<a href="#" id="addItem" class="btn btn-default btn-block">'.$this->l('Add').' <i class="icon-arrow-right"></i></a>
	</div>
	<div class="col-lg-6"><p>'.$this->l('Attachments for this product:').'</p>
	<select multiple="multiple" name="items[]" id="items" style="height: 160px;">';
	foreach ($features1 as $attach) {
$txt .= '
	<option value="'.$attach['id_feature'].'">'.$attach['name'].'</option>';
	}
$txt .= '
	</select>
	<a href="#" id="removeItem" class="btn btn-default btn-block"><i class="icon-arrow-left"></i> '.$this->l('Remove').'</a>
	</div>
	</div>
	</div>
	</div>
	
	<div class="form-group">
	<div class="col-lg-1"><span class="pull-right"></span></div>
		<label class="control-label col-lg-2" for="description_1">
		<span class="label-tooltip" data-toggle="tooltip" title="">'.$this->l('Group Description').'</span>
		</label>
	<div class="col-lg-5">
	<input type="text" id="description"	class="form-control updateCurrentText" name="description" value="'.$this->l('500 characters maximum').'"
	onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" onblur="updateLinkRewrite();" required="required"	/>		
	</div>
	</div>	
	<button type="submit" name="saveCategory" value="' . $this->l('Save') . '" class="btn btn-default pull-left">
		<i class="process-icon-save"></i>'.$this->l('Save').'
	</button>
	</form>
	</div>';

        return $txt;

Edited November 4, 2014 by funstad (see edit history)

[PascalVG]

funstad,

I presume the layout of the page bothers you? Normally to be fixed by some css coding.

Can you share the URL of this page, so we can have a look?

 

N.B. It looks like some back office page, so maybe, if you want, create a temporary employee (Back office, Admin->employee) and give access rights for this module configuration page. You can PM me the login name, password and URL to your back office login name.

 

 

pascal

P.S. draw some arrows on the image above to show how you want it to be displayed ideally.

Edited November 2, 2014 by PascalVG (see edit history)

[Crezzur.com]

The "Priority" and "opslaan (save)" button are misplaced, I'm using prestashop 1.6 layout but for some reason the layout is not the same.

 

 

This is what i want to achieve, im using the same div tags as my example but it just dont seem to work.

[PascalVG]

Hi funstad (hoi :-) ),

 

Probably just a matter of adding some "display:block;" to some div's but without seeing the page It's alittle harder to exactly tell you where.

 

Maybe try this:

in themes/<your theme folder>/css/global.css (make backup)

add:

 

.col-lg-1 { display: block;}

 

It may be that this does the trick. Beware, maybe this defines it too wide (i.e. it may also have consequences for the layout on other pages, if they also use a (div/span) tag with class="col-lg-1") , and we should narrow it down to only this page.

 

But first try to add this and see if this does the trick. If not, please allow access to that page, as described in my previous post.

 

pascal.