pencil icon not showing next to the elements it's sposed to

rtwheelock

All of my inline edit pencil icon show up in the top right corner of the page instead of next to the element they are for. Is this a bug or is there something I'm doing wrong?

admin

It may have something to do with the CSS on the page and where you placed your variables. You can try wrapping the variable in a div with "relative" positioning to see if that helps. Also, page title, and meta variables found in the header are automatically moved to the upper left area of the page.

rtwheelock

That is exactly how I had done it. I was just doing a test layout to see how the inline editing worked. Below is my css and layout page (the css came straight from the main layout that comes with fuel minus the #main styles for the div in question which i had to comment out to show on this post):

=======
test.php
=======
<?php $this->load->view('_blocks/test_header')?> <div id="main"> <?php echo fuel_var('hello', ''); ?> </div> <?php $this->load->view('_blocks/test_footer')?>
========
test.css
========

/***************************************************************
RESET BROWSER VALUES SO EVERYONE IS THE SAME
***************************************************************/
@import url(reset.css);
@import url(common.css);


/***************************************************************
TAG STYLES
***************************************************************/
body {font-family: Arial, 'Lucida Grande', sans-serif; color: #fff; }
h1 { font-size: 30px; }
h2 { font-size: 24px; color: #fff; margin-bottom: 15px; }
h3 { font-size: 16px; color: #ea5b17; margin-bottom: 5px; font-weight: normal; }
h4 { font-size: 12px; margin-bottom: 5px; }
a { color: #dc461c; }
p { margin-bottom: 15px; line-height: 16px; }
blockquote { font-style: italic; margin-bottom: 20px; }
cite { display: block; font-size: 12px; color: #e95c18; margin-top: 10px; }
input { padding: 2px; }
ul { margin: 0 0 20px 15px; }
li { list-style: disc; }
input, textarea { border: 1px solid #ccc; }
textarea { font-family: Arial, 'Lucida Grande', sans-serif; color: #333; font-size: 12px; }


/***************************************************************
GENERIC CLASSES
***************************************************************/
.left { float: left; }
.right { float: right; }
.block { margin-bottom: 30px; }
a.readmore { display: block; }
table.form td { padding: 3px 5px 3px 0; }

#main{
width:300px;
position:relative;
top:100px;
left:100px;
background-color:#eee;
border:1px solid red;
color:#000;
}

admin

Does "hello" even show up as a variable? What if you change:
<?php echo fuel_var('hello', ''); ?> to <?php echo fuel_var('body', ''); ?>

rtwheelock

it does show up, I added a new layout to test how it all worked. but if I use the same layout at the main layout (default that came with install) but with a different name in /My_fuel_layouts.php it still does not place the icon by the block. However if I switch to the main layout on the page the edit pencils work as expected. Below is the main layout and the layout I was using for my test:

$config['layout_fields']['main'] = array( 'copy' => array('copy' => lang('layout_field_main_copy')), 'page_title' => array('label' => lang('layout_field_page_title')), 'meta_description' => array('label' => lang('layout_field_meta_description')), 'meta_keywords' => array('label' => lang('layout_field_meta_keywords')), 'body' => array('label' => lang('layout_field_body'), 'type' => 'textarea', 'description' => lang('layout_field_body_description')), 'body_class' => array('label' => lang('layout_field_body_class')), ); $config['layout_fields']['test'] = array( 'copy' => array('copy' => lang('layout_field_main_copy')), 'page_title' => array('label' => lang('layout_field_page_title')), 'meta_description' => array('label' => lang('layout_field_meta_description')), 'meta_keywords' => array('label' => lang('layout_field_meta_keywords')), 'hello' => array('label' => 'hello', 'type' => 'textarea', 'description' => 'hello'), 'body_class' => array('label' => lang('layout_field_body_class')), );

admin

So to be clear...
1. You created a layout view file here:
fuel/applications/views/_layouts/test.php
2. You changed the <?=fuel_var('body', '')?> TO <?=fuel_var('test', '')?> in the new test.php layout
3. You added the MY_fuel_layouts.php above

Does that sound right?

rtwheelock

Yes, everything look correct but number 2. Changed the <?=fuel_var('body','')?> TO <?=fuel_var('hello','')?> in the new test.php layout since the variable in the My_Fuel_layouts array for the text area is "hello". But whether I named the variable "hello" or named the variable the exact same name "body" as main on My_Fuel_layouts the icon doesn't move. Is there maybe something that I need to make sure is included in my fuel/applications/views/_layouts/test.php file or in the _blocks I'm using for my header and footer?? (Thank you for trying to debug this for me btw :-)

admin

That should work. The pencil icon should be showing up in the upper left corner of the parent element of where you placed the fuel_var function. It calculates the x and y position by recursively calculating it's parents offset top and left values. You are expecting the pencil icon to be positioned top: 100px; left: 100px; correct?
What is in your test_header.php file? If you use Firebug, are you able to see clearly the dimensions of where div#main is?