[Solved] Alignments of displayed fields

co

codeslayer 17 Dec, 2008

Hi ,

Following my earlier post regarding displaying of results here http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=12&t=11678
The results are displaying but not aligned. A sreenshot is attached herewith.

How can I overcome this problem?

Regards
CS

Max_admin 17 Dec, 2008

Hi Cs, is this a table or what ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

co

codeslayer 18 Dec, 2008

Yes this is a table to shows all the records with three columns data + one column for EDIT option.
The complete result is shown on the next page once click on the entry date.

The code is as follow and is declared in Connection Manager > General > Body.


<table align=center; width=100%; border="0"
cellpadding="2" cellspacing="2">
  <tbody>
    <tr<?php if ($i % 2) echo ' style="background-color: #EBEBEB;"';?>>
      <td><a href="index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry={cf_id}">{date}</a></td>
	  <td>{customer}</td>
	  <td>{region}</td>
      <td>{edit_record}</td>
    </tr>
  </tbody>
</table>
<?php $i++ ?>

See in the table it is already align to center, but only the first column is centrally aligned while all the columns shows as attached image in my first post.

Gr

GreyHead 18 Dec, 2008

Hi codeslayer,

Please leave out the semi-colons after the table attributes

<table align='center' width='100%' border='0' cellpadding="2" cellspacing="2">

Bob

co

codeslayer 18 Dec, 2008

Thanks for reply Bob🙂

I have made the suggested changes but its still not working.
anyother idea, please ?😶

Regards
CS

Gr

GreyHead 18 Dec, 2008

Hi codeslayer,

Hard to say - is the page on-line? If not please do view-source, copy all the html into a file and post that here.

Bob

co

codeslayer 18 Dec, 2008

Yes its on-line http://mk.hassanagha.com/index.php?option=com_chronoconnectivity&Itemid=84

I can give you admin access if you want me to.

however, here is the html code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Report - CM Cycle</title>

  <link href="/templates/ja_corona/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="http://mk.hassanagha.com/modules/mod_yoo_login/mod_yoo_login.css.php" type="text/css" />
  <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>


<link rel="stylesheet" href="http://mk.hassanagha.com/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="http://mk.hassanagha.com/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="http://mk.hassanagha.com/templates/ja_corona/css/editor.css" type="text/css" />

<link rel="stylesheet" href="http://mk.hassanagha.com/templates/ja_corona/css/template.css" type="text/css" />

<link rel="stylesheet" href="http://mk.hassanagha.com/templates/ja_corona/css/typo.css" type="text/css" />

<script language="javascript" type="text/javascript" src="http://mk.hassanagha.com/templates/ja_corona/js/ja.script.js"></script>

<!-- Menu head -->
			<link href="http://mk.hassanagha.com/templates/ja_corona/ja_menus/ja_slidemenu/ja.slidemenu.css" rel="stylesheet" type="text/css" />
			<script src="http://mk.hassanagha.com/templates/ja_corona/ja_menus/ja_slidemenu/ja.slidemenu.js" language="javascript" type="text/javascript"></script>
			
<link href="http://mk.hassanagha.com/templates/ja_corona/css/colors/default.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img {border: none;}
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->

<script type="text/javascript">
/*<![CDATA[*/
document.write ('<style type="text\/css">#ja-mainnav ul{visibility: hidden;}<\/style>');
/*]]>*/
</script>

</head>

<body id="bd" class="wide fs3" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
	<li><a href="/index.php?option=com_chronoconnectivity&Itemid=84#ja-content" title="Skip to content">Skip to content</a></li>
	<li><a href="/index.php?option=com_chronoconnectivity&Itemid=84#ja-mainnav" title="Skip to main navigation">Skip to main navigation</a></li>
	<li><a href="/index.php?option=com_chronoconnectivity&Itemid=84#ja-col1" title="Skip to 1st column">Skip to 1st column</a></li>

	<li><a href="/index.php?option=com_chronoconnectivity&Itemid=84#ja-col2" title="Skip to 2nd column">Skip to 2nd column</a></li>
	<li><a href="/index.php?option=com_chronoconnectivity&Itemid=84#ja-col3" title="Skip to 3nd column">Skip to 2nd column</a></li>
</ul>

<div id="ja-wrapper-top">
<div id="ja-wrapper">

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
<div id="ja-header" class="clearfix">

	<h1 class="logo">

		<a href="/index.php" title=""><span></span></a>
	</h1>

	<!-- BEGIN: MAIN NAVIGATION -->
	<div id="ja-mainnav" class="clearfix">
		<div id="ja-slidemenu" class="mainlevel clearfix">
<ul><li class="menu-item0 first-item"><a href="/index.php?option=com_content&view=frontpage&Itemid=70" class="menu-item0 first-item" id="menu70" title="Home"><span class="menu-title">Home</span><span class="menu-desc">Home</span></a></li><li class="menu-item1"><a href="/index.php?option=com_content&view=article&id=54&Itemid=82" class="menu-item1" id="menu82" title="Forms"><span class="menu-title">Forms</span><span class="menu-desc">Forms</span></a></li><li class="menu-item2 active last-item"><a href="/index.php?option=com_content&view=article&id=49&Itemid=83" class="menu-item2 active last-item" id="menu83" title="Reports"><span class="menu-title">Reports</span><span class="menu-desc">Reports</span></a></li></ul>

</div>				<script type="text/javascript">
					window.addEvent('domready', function(){new JASplit2Menu($E('#ja-slidemenu ul'),{
			navwidth: 0,
			offwidth: 64,
			showactive: true
		});});
				</script>
					</div>
	<!-- END: MAIN NAVIGATION -->
	
	<!-- BEGIN: USER TOOLS -->
  	<!-- END: USER TOOLS -->

</div>
</div>
<!-- END: HEADER -->

<!-- BEGIN: SEARCH + SUBNAV -->

<div id="ja-subnavwrap">

	
		<div id="ja-subnav" class="clearfix">
	<div class="sublevel">
<ul><li class=" active first-item"><a href="/index.php?option=com_chronoconnectivity&Itemid=84" class=" active first-item" id="menu84" title="Report - CM Cycle"><span class="menu-title">Report - CM Cycle</span></a></li></ul>
</div>	</div>
	
</div>
<!-- END: SEARCH + SUBNAV -->

<div id="ja-mainwrap">

<!-- BEGIN: TOP SPOTLIGHT -->

<div id="ja-topslwrap" class="clearfix">
		<div id="ja-topsl1" class="ja-box-br" style="width:100%; float: left;">
	<div class="ja-box-bl"><div class="ja-box-tr"><div class="ja-box-tl clearfix">
	
	  	  <div class="ja-box-full" style="width: ;">
					<div class="moduletable">
					<h3>YOOlogin</h3>
					
<form action="index.php" method="post" name="login">

<span class="quick" style="display: block;">
	<span class="yoo-login">

	
				<span class="logout">
		
						<span class="greeting">Hi Raza Syed,</span>
						
			<span class="logout-button-text">
				<button value="Logout" name="Submit" type="submit" title="Logout">Logout</button>
			</span>
		
			<input type="hidden" name="option" value="com_user" />
			<input type="hidden" name="task" value="logout" />
			<input type="hidden" name="return" value="aHR0cDovL21rLmhhc3NhbmFnaGEuY29tL2luZGV4LnBocD9vcHRpb249Y29tX2Nocm9ub2Nvbm5lY3Rpdml0eSZJdGVtaWQ9ODQ=" />

			
		</span>
		
				
	</span>
</span>
</form>		</div>
	
	  </div>
	  	
	  
	</div></div></div></div>
	
	
</div>
<!-- END: TOP SPOTLIGHT -->

<div id="ja-containerwrap-f">
<div id="ja-container">

<div id="ja-container-top">
<div id="ja-container-bot" class="clearfix">
<div id="ja-container-inner1">
<div id="ja-container-inner2" class="clearfix">

	<!-- BEGIN: CONTENT -->
	<div id="ja-content">
	<div class="ja-innerpad clearfix">

		

				<div id="ja-breadcrumb">
			
		</div>
		
			<link href="http://mk.hassanagha.com/components/com_chronoconnectivity/js/smoothbox/smoothbox.css" rel="stylesheet" type="text/css" />

	<link href="http://mk.hassanagha.com/components/com_chronoconnectivity/js/tooltip.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="http://mk.hassanagha.com/components/com_chronoconnectivity/js/smoothbox/smoothbox.js"></script>
	<script type="text/javascript">
	Tips.implement({
		initialize: function(elements, lasthope,options){
				this.setOptions(options);
				this.lasthope = lasthope;
				this.toolTip = new Element('div', {
					'class': 'cf_'+this.options.className + '-tip',
					'id': this.options.className + '-tip-' + this.options.elementid,
					'styles': {
						'position': 'absolute',
						'top': '0',
						'left': '0',
						'visibility': 'hidden'
					}
				}).inject(document.body);
				this.wrapper = new Element('div').inject(this.toolTip);
				$$(elements).each(this.build, this);
				if (this.options.initialize) this.options.initialize.call(this);
			},
		
			build: function(el){
				el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
				if (el.title){
					var dual = el.title.split('::');
					if (dual.length > 1){
						el.$tmp.myTitle = dual[0].trim();
						el.$tmp.myText = dual[1].trim();
					} else {
						el.$tmp.myText = el.title;
					}
					el.removeAttribute('title');
				} else { 
					var dual = this.lasthope.split('::');
					if (dual.length > 1){
						el.$tmp.myTitle = dual[0].trim();
						el.$tmp.myText = dual[1].trim();
					} else {
						el.$tmp.myText = el.title;
					}
				}
				if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "…";
				el.addEvent('mouseenter', function(event){
					this.start(el);
					if (!this.options.fixed) this.locate(event);
					else this.position(el);
				}.bind(this));
				if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
				var end = this.end.bind(this);
				el.addEvent('mouseleave', end);
				el.addEvent('trash', end);
			},
			start: function(el){
				this.wrapper.empty();
				if (el.$tmp.myTitle){
					this.title = new Element('span').inject(new Element('div', {'class': 'cf_'+this.options.className + '-title'}).inject(this.wrapper)).setHTML(el.$tmp.myTitle);
				}
				if (el.$tmp.myText){
					this.text = new Element('span').inject(new Element('div', {'class': 'cf_'+this.options.className + '-text'}).inject(this.wrapper)).setHTML(el.$tmp.myText);
				}
				$clear(this.timer);
				this.timer = this.show.delay(this.options.showDelay, this);
			}
		});
	window.addEvent('domready', function() {
		$$('a.smoothbox').each(function(ed){
			var Tips3 = new Tips(ed, $(ed.getProperty('id')+'_tip').getText(), {elementid:'xxxxxxxxx'});
		});
	});
	</script>
	   
	<form action="index.php?option=com_chronoconnectivity&connectionname=report_cmcycle" method="post" name="connectivity">
	
	<h3>Click on dates below to see the complete record.</h3>

<div class="list-footer">

<div class="limit">Display Num<select name="limit" id="limit" class="inputbox" size="1" onchange="this.form.submit()"><option value="5" >5</option><option value="10" >10</option><option value="15" >15</option><option value="20" >20</option><option value="25" >25</option><option value="30" >30</option><option value="50" >50</option><option value="100" >100</option><option value="0"  selected="selected">All</option></select></div>

<div class="counter"></div>
<input type="hidden" name="limitstart" value="0" />
</div>
<hr>

    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=1&Itemid=84">05/12/08</a></td>
	  <td>Nestle</td>

	  <td> North</td>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=1&Itemid=84">Edit</a></td>
    </tr>
  </tbody>
</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr style="background-color: #EBEBEB;">

      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=2&Itemid=84">04/12/08</a></td>
	  <td>Tetrapak</td>
	  <td> North</td>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=2&Itemid=84">Edit</a></td>
    </tr>
  </tbody>

</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=3&Itemid=84">04/12/08</a></td>
	  <td>National Foods</td>
	  <td> North</td>

      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=3&Itemid=84">Edit</a></td>
    </tr>
  </tbody>
</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr style="background-color: #EBEBEB;">
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=4&Itemid=84">04/12/08</a></td>

	  <td>Engro Foods Limited</td>
	  <td>South</td>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=4&Itemid=84">Edit</a></td>
    </tr>
  </tbody>
</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>

    <tr>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=5&Itemid=84">04/12/08</a></td>
	  <td>Berger </td>
	  <td> North</td>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=5&Itemid=84">Edit</a></td>
    </tr>

  </tbody>
</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr style="background-color: #EBEBEB;">
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=6&Itemid=84">04/12/08</a></td>
	  <td>Tri Tex  </td>
	  <td> North</td>

      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=6&Itemid=84">Edit</a></td>
    </tr>
  </tbody>
</table>
    <table left='center' width='100%' border='0' cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle_fulldetails+&entry=7&Itemid=84">04/12/08</a></td>

	  <td>BOSICOR PAKISTAN LIMITED </td>
	  <td> North</td>
      <td><a href="/index.php?option=com_chronoconnectivity&connectionname=report_cmcycle&task=editrecord&cids=7&Itemid=84">Edit</a></td>
    </tr>
  </tbody>
</table>
<hr>
<br>

<strong>
The End of results.
</strong>
<br>
<div class="list-footer">

<div class="limit">Display Num<select name="limit" id="limit" class="inputbox" size="1" onchange="this.form.submit()"><option value="5" >5</option><option value="10" >10</option><option value="15" >15</option><option value="20" >20</option><option value="25" >25</option><option value="30" >30</option><option value="50" >50</option><option value="100" >100</option><option value="0"  selected="selected">All</option></select></div>

<div class="counter"></div>
<input type="hidden" name="limitstart" value="0" />
</div>

		<input type="hidden" name="option" value="com_chronoconnectivity">
	</form>
	<!-- You are not allowed to remove or edit the following 3 lines anyway if you didnt buy a ChronoConnectivity license --> 
	<div class="chronoform">
	<a href="http://www.chronoengine.com">Joomla Professional Work</a>
	</div>
	<!-- You are not allowed to remove or edit the above 3 lines anyway if you didnt buy a ChronoConnectivity license -->

		
	
		
		
	</div>
	</div>
	<!-- END: CONTENT -->
		
	
</div></div></div></div></div></div>

</div>

<!-- BEGIN: FOOTER -->
<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

	<div class="copyright">

		<ul class="menu"><li class="item70"><a href="/index.php?option=com_content&view=frontpage&Itemid=70"><span>Home</span></a></li><li class="parent item82"><a href="/index.php?option=com_content&view=article&id=54&Itemid=82"><span>Forms</span></a><ul><li class="item85"><a href="/index.php?option=com_chronocontact&Itemid=85"><span>Cm Cycle</span></a></li></ul></li><li class="parent active item83"><a href="/index.php?option=com_content&view=article&id=49&Itemid=83"><span>Reports</span></a><ul><li id="current" class="active item84"><a href="/index.php?option=com_chronoconnectivity&Itemid=84"><span>Report - CM Cycle</span></a></li></ul></li></ul>
		
	</div>
	
	<div class="ja-cert">
		
		<a href="http://jigsaw.w3.org/css-validator/validator?uri=%2Findex.php%3Foption%3Dcom_chronoconnectivity%26Itemid%3D84" target="_blank" title="Our site is valid CSS" style="text-decoration: none;">
		<img src="http://mk.hassanagha.com/templates/ja_corona/images/but-css.png" alt="Our site is valid CSS" />
		</a>

		<a href="http://validator.w3.org/check/referer" target="_blank" title="Our site is valid XHTML 1.0 Transitional" style="text-decoration: none;">
		<img src="http://mk.hassanagha.com/templates/ja_corona/images/but-xhtml10.png" alt="Our site is valid XHTML 1.0 Transitional" />
		</a>
	</div>

</div>
</div>
<!-- END: FOOTER -->

</div>
</div>


</body>

</html>

Max_admin 18 Dec, 2008

Hi CS, you have 1 table per record ? you should have 1 row per record and all are children of only 1 table!

Regards
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

Gr

GreyHead 18 Dec, 2008

Hi codeslayer,

Thanks for the admin access. I took a quick look and I think that the problem is that you are creating a separate table for each results line and so they don't line up. Try removing the <table . . .>, <tbody> </tbody> and </table> lines from your code.

:: I see Max has posted the same thing :-)

Bob

co

codeslayer 18 Dec, 2008

just removed <table><tbody></tbody></table> tags.
Now the records are not showing. its keeps on loading and loading and only blank white page is showing.

Max_admin 18 Dec, 2008

put <table><tbody> in the header and the close tags in the footer ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

Je

JeLu 18 Dec, 2008

Perhaps you can put your <table> in header and </table> in footer and remove thoose tags from bodypart.

Sorry to jump in like this but you can´t totaly leave out the table tags.

Regards

JeLu

Edited: no respond when I started this Post and a new one from Max when I posted it, damn yuo´re fast on this forum 😶

co

codeslayer 19 Dec, 2008

Its Worked !!

Thanks a million MAX, Bob and JeLu.
Merry Chirstmas ! 😀

Regards
CS

Forums

[Solved] Alignments of displayed fields