Solved:CSS question - Frontend listing (Column widths)

Using the Webdeveloper plugin for FF I can see that my CSS is being applied to the first column

table.adminlist tr td:first-child
{
  width: 10px;
}

However it doesn't appear to make any difference to the columns which are simply sized evenly along the screen.

http://lists.internetlinked.com/index.php/component/chronoconnectivity/List_Gifts

Hi abasel,

You have width=47% on each of the columns in every row. You probably need to remove these and set new widths on just the column headers.

Bob

Yes but I can't work out where in Chronnoconnectivity this is set.

Think I have it.. I need to hack

com_chronoconnectivity\views\list_data.php

, changing this section

<th width="<?php echo (int)(95/count($extra_dataview_fields)); ?>%" class='<?php echo 'th-'.$html_helper->slug($field_name); ?>'>

						<a href="<?php echo JRoute::_($this->build_url($this->connection_url."&task=".$this->tasks_names['cc_sort_data']."&orderfld=".$field_name."&orderdrc=".$drc)); ?>" class="sort-link<?php if(!empty($original_drc)): ?> sorted-<?php echo $original_drc; ?><?php endif; ?>"><?php echo $field_label; ?><?php echo $drcimg; ?></a>

					</th>

				<?php else: ?>

					<th width="<?php echo (int)(95/count($extra_dataview_fields)); ?>%" class='<?php echo 'th-'.$html_helper->slug($field_name); ?>'><?php echo $field_label; ?></th>

				<?php endif; ?>

i.e. remove the width option

Hi abasel,

Sorry I didn't notice that was where it was set. Rather than hack the code I would probably switch to using the Custom Listing Settings as soon as I need to tweak the auto-formatting. Here's a basic example of the three boxes.

Header:

<h1>Heading</h1>
<hr style='margin:6px;' />
<table cellpadding="3" cellspacing="0" border="0">
  <thead>
    <tr>
      <th style='width:200px;' >Date created</th>
      <th style='width:240px;' >Name</th>
      <th style='width:120px;' >Gender</th>
      <th style='width:120px;' >DoB</th>
      <th style='width:120px;' >SS number</th>
     </tr>
  </thead>
  <tbody>

Body:

<tr>
  <td>{cf_created}</td>
  <td><a href='index.php?option=com_chronoforms&chronoform=dd_view&cid={cf_id}' >{lname}, {fname} {mname}</a></td>
  <td>{gender}</td>
  <td>{dob}</td>
  <td>{social}</td>
</tr>

Footer:

  </tbody>
</table>
<hr />
{pagination}

Bob

Many thanks, this time I will leave it as the site is only running for about three weeks but I know that I will need to do this again some time and I now know what to do.

Thanks again

Hi Bob, using this on another site but just got one small issue:

<tr>
  <td>{cf_ipaddress}</td>
  <td>{code}</td>
  <td><a href='index.php?option=com_chronoforms&chronoform=dd_view&cid={cf_id}' >{guardian}</a></td>
  <td>{phone}</td>
  <td>{surname}</td>
  <td>{_Delete_}</td>
</tr>

How do I show the _Delete_ option? Also how do I get sortable columns?

Hi abasel,

:-( I'm not sure about either question (I'd probably hand-code the delete link and maybe the sortable columns).

The FAQs here use edit:[Edit] in the List View Fields box and then {edit} in the Body section (limited to Admins only). Linkable values also work like that. The same should work for Delete.

I just got the column titles to sort too by putting e.g. Article.title in the Sortable Fields box and {Article.title} in the Header code box.

Bob

I tested it using edit. The text [Edit] is displayed but without the hyperlink. I tried finding the FAQ to see if I was missing something but couldn't find it.

Ok, got my syntax all correct now :-)

In "Frontend List Settings", under the "General" tab and in the "List View Fields", I added

_DELETE_:Delete

In the "Body" section of the "Custom Listing Settings" I put

{_DELETE_}

ie the "Body" section looked as follows:

<tr>
  <td>{cf_ipaddress}</td>
  <td>{cf_created}</td>
  <td>{code}</td>
  <td><a href='index.php?option=com_chronoforms&chronoform=dd_view&cid={cf_id}' >{guardian}</a></td>
  <td>{phone}</td>
  <td>{firstname}</td>
  <td>{paid}</td>
  <td>{_DELETE_}</td>
</tr>

And as usual ChronoEngine works like a dream :-)

Hi abasel,

Well done.

Sorry I misled you about the FAQ - there isn't one, but the whole FAQ listing here is a ChronoConnectivity application and I added the sortable titles to the FAQ listing.

Bob

Thanks