Jump to content

XHTML 1.0 on WordPress 4.0.1 - Why does the <label> for a checkbox "pop" out of it's <div>?


Greywacke

Recommended Posts

Hi there,

 

I'm having some trouble developing a self-handling, public form for wordpress 4.0.1 in xhtml 1.0 - my issue (visually) is that the <label> tag and it's contents (a checkbox <input> tag), both dynamically written using XYZ-Scripts' Insert PHP Code Snippet plugin - keep popping out of the designated <div> tag when combining the scripts into one 0o...

here is the portion of code written to the div to display category checkbox options:

$printr = function ($data, $exit = TRUE) {   if ($data) {    print '<pre>';    print_r($data);    print '</pre>';  }  if ($exit) {    exit;  }};$args = array(  'orderby' => 'name',  'order' => 'ASC'  );$categories = get_categories($args);foreach($categories as $category) {     echo '<label for="cat_'.$category->term_id.'">'.	'<input type="checkbox" name="post_category_'.	'name[]" id="cat_'.	$category->term_id.'" value="'.	$category->term_id.'"'.	    (($category->name=='Uncategorized')?	    ' checked="checked"':	    '').	'>'.$category->name.    ' ('.$category->count.')'.    '</label><br/>	';}

then this is called using shortcode, from the following page (which the results of can be seen at http://gp.geekout.co.za/submit-post/):

<!--[insert data into database if posted]--><form action="" method="post">    <div style="float:left; overflow:visible;">Post Title:  </div><div style="float:right; width:80%;"><input type="text" name="post_title" value="" style="width:100%;"/></div>    <p><br style="clear:both;"/></p>    <div style="float:left; overflow:visible;">Post Content:  </div><div style="float:right; width:80%;"><textarea rows="20" cols="50" name="post_content" style="text-align: justify; width:100%;"></textarea></div>    <p><br style="clear:both;"/></p>    <div style="float:left; overflow:visible;">Post Categories:  </div><div style="float:right; width:80%;">[xyz-ips snippet="print-categories"]</div>    <p><br style="clear:both;"/></p>    <div style="float:left; overflow:visible;">Submit:  </div><div style="float:right;"><input type="submit" value="Submit Form" style="width: auto;" /></div>    <p><br style="clear:both;"/> </p></form>

now I'm perplexed to find out what style is causing this issue!!!

 

edit: it does not seem to be the style (CSS) at all - but rather a php priority issue regarding the script snippets being called and writing before the wordpress rendering takes place.

 

also, a bit further dow, you will see that i have changed the way the scripts are used - thus causing the problem to be with sharing variables between snippets by making them superglobals.

 

thanks in advance for the help - it will be sincerely appreciated! ;)

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

That's a CSS problem, it doesn't matter whether the code is HTML or XHTML because it's the CSS that changes the appearance of everything. You can use the DOM inspector of your browser's developer tools to see which styles are being applied to an element.

 

If I understood your description, your labels are overflowing outside of a <div> element that contains them. That means that the <div> has a fixed height. If you want it to be flexible you need to make sure that a height is not set. If a height is already set then you can override it with the value "auto".

Link to comment
Share on other sites

hmmm - overflowing out of an 80% width div? i'll check out the chrome developers tools then...

the inline style of the container div is:

float:right; width:80%;

yet the other form elements are 100% ok... so now I have set the style to be the same as on http://wp.geekout.co.za/submit-post/, where the label is not yet defined. as here it displays within the div it's supposed to.

continuing to edit and make sure the css is the same as on this page.

 

edit: ok done that - they are exactly the same yet it still happens... seems the issue is in the wordpress plugin - will break up the script as is done on wp.geekout.co.za/submit-post and see what happens...

 

edit: am now using superglobals in the form of the following script which is run with the individual lines of php converted to XYZ-Scripting Insert PHP Code Snippets.

[xyz-ips snippet="global-printr-debug-function"][insert data if posted]<form action="" method="post">    <div style="float:left; width:20%;">Post Title:  </div><div style="float:right; width:80%;"><input type="text" name="post_title" value="" style="width:100%;"/></div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Post Content:  </div><div style="float:right; width:80%;"><textarea rows="20" cols="50" name="post_content" style="text-align: justify; width:100%;"></textarea></div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Post Categories:  </div><div style="float:right; width:80%;">[xyz-ips snippet="global-set-args-parameter-and-call-getcategories"][xyz-ips snippet="global-foreach-category-open-loop-and-set-variables"]<label for="cat_[xyz-ips snippet="global-category-term-id"]" style="overflow:visible;"><input type="checkbox" name="post_category_name[]" id="cat_[xyz-ips snippet="global-category-term-id"]" value="[xyz-ips snippet="global-category-term-id"]" [xyz-ips snippet="global-is-checked"]>[xyz-ips snippet="global-category-name"] ([xyz-ips snippet="global-category-count"])</label>[xyz-ips snippet="global-foreach-category-close-loop"]</div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Submit:  </div><div style="float:right; width:80%;"><input type="submit" value="Submit Form" style="width: auto;" /></div>    <p style="clear:both;> </p></form>

which is tantamount to executing the following php page:

<?php$GLOBALS['printr'] = function ($data, $exit = TRUE) {   if ($data) {    print '<pre>';    print_r($data);    print '</pre>';  }  if ($exit) {    exit;  }};?>[insert data if posted]<form action="" method="post">    <div style="float:left; width:20%;">Post Title:  </div><div style="float:right; width:80%;"><input type="text" name="post_title" value="" style="width:100%;"/></div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Post Content:  </div><div style="float:right; width:80%;"><textarea rows="20" cols="50" name="post_content" style="text-align: justify; width:100%;"></textarea></div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Post Categories:  </div><div style="float:right; width:80%;"><?php$GLOBALS['args'] = array(  'orderby' => 'name',  'order' => 'ASC'  );$GLOBALS['categories'] = get_categories($GLOBALS['args']);?><?phpforeach($GLOBALS['categories'] as $GLOBALS['category']) {    $GLOBALS['term_id'] = $GLOBALS['category']->term_id;    $GLOBALS['name'] = $GLOBALS['category']->name;    $GLOBALS['count'] = $GLOBALS['category']->count;?><label for="cat_<?phpecho $GLOBALS['term_id'];?>" style="overflow:visible;"><input type="checkbox" name="post_category_name[]" id="cat_<?phpecho $GLOBALS['term_id'];?>" value="<?phpecho $GLOBALS['term_id'];?>" <?phpecho $GLOBALS['name'];?> (<?phpecho $GLOBALS['count'];?>)</label><?php}?></div>    <p style="clear:both;"></p>    <div style="float:left; width:20%;">Submit:  </div><div style="float:right; width:80%;"><input type="submit" value="Submit Form" style="width: auto;" /></div>    <p style="clear:both;> </p></form> 

i truly hope it works this time around, otherwise how the heck do i set public variables rather than superglobals, without using a class? 0o

 

damnit - superglobals seem to be disabled within XYZ-Scripting's Insert PHP Code Snippets :@

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

ok this issue is now solved thanks to Jubin Kurian, The Support Desk Manager at XYZScripts.com ;)

if(!function_exists('php_post_form')){	function php_post_form() {		if (				!empty($_POST['post_title']) &&				!empty($_POST['post_content']) &&				!empty($_POST['post_category_name[]']) &&				!empty($_POST['submit'])			 ) {			echo '<pre>[article submission code]</pre>'."rn";		}		echo '<form action="" method="post">'."rn".			 '<div style="float:left; width:20%;">Post Title:  </div><div style="float:right; width:80%;"><input type="text" name="post_title" value="" style="width:100%;"/></div>'."rn".			 '<p style="clear:both;"></p>'."rn".			 '<div style="float:left; width:20%;">Post Content:  </div><div style="float:right; width:80%;"><textarea rows="20" cols="50" name="post_content" style="text-align: justify; width:100%;"></textarea></div>'."rn".			'<p style="clear:both;"></p>'."rn".			'<div style="float:left; width:20%;">Post Categories:  </div><div style="float:right; width:80%;">'."rn";		$args = array(		  'orderby' => 'name',		  'order' => 'ASC'		);		$categories = get_categories($args);		foreach($categories as $category) {			$term_id = $category->term_id;			$name = $category->name;			$count = $category->count;		echo '<label for="cat_<?=$term_id?>" style="overflow:visible;"><input type="checkbox" name="post_category_name[]" id="cat_'.$term_id.'" value="'.$term_id.'" '.		((strtolower($name)=='uncategorized')?' checked="checked"':'').		' />'.$name.' ('.$count.')</label><br/>';		}		echo '</div>'."rn".			 '<p style="clear:both;"></p>'."rn".			 '<div style="float:left; width:20%;">Submit:  </div><div style="float:right; width:80%;"><input type="submit" value="Submit Form" style="width: auto;" /></div>'."rn".			 '<p style="clear:both;> </p>'."rn".			 '</form>'."rn";	}}add_filter( 'php_post_form','',10,2); 

i had to convert it all to a function and insert it in the plugin's xyz-functions,php file now working 100% thanks ;)

Edited by Pierre 'Greywacke' du Toit
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
×
×
  • Create New...