⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Is it possible alter render of <th> widths?



MightyPolo
  • profile picture
  • Member

Posted 21 September 2012 - 13:29 PM

Hi first I want to say that Grocery Crud is helping me a lot.

I came across one thing, which Iam not sure how to solve.

I need to alter width of some columns in rendered table.
I wanted to use javascript, but i found that <th> tags dont have any IDs so resizing dynamicly with javascript would be rather complicated.

So Iam thinking about another aproach which will consist of creating new theme in which I alter list.php script to insert id tags in to <th> tags in render of table.

Before I do that, I would like to know your opinion, because maybe there is another way, much easier than this.

Thank you.
And btw all previous questions were solved using this forum, great work!

MightyPolo
  • profile picture
  • Member

Posted 25 September 2012 - 08:18 AM

So what i did was:
1. Copy theme Flexigrid to myFlexigrid
2. Altered list.php in theme folder and ommited width style tag in tg and th tags.
3. Added to th tags css id derived from name of column

With this Iam able to controll width, but I came across another problem which is that string fields in list are being truncated.
I wasnt able to find where is this happening, Ill let you know as soon as I find it.

Bye!

crina
  • profile picture
  • Member

Posted 28 September 2012 - 13:32 PM

my solution of a easy customizations for the table columns[u][i][b] I have defined a $column->style_string the exact same way that $column->display_as is setted[/b][/i][/u] ... and this way you can set colours, widths, text-align and all other sort of CSS for a column.

So you only have to set it from the controller like this:

// Set the styles for columns
$styles = array( 'ACCOUNT_ID' => 'width: 100px;',
'DATE' => 'width: 60px; text-align: center;',
'DESCRIPTION' => 'width: 200px;',
'DEBIT' => 'width: 80px; text-align: right; background-color: #FAD2D2',
'CREDIT' => 'width: 80px; text-align: right; background-color: #D9FAD2',
'TAGS' => 'width: 140px;'
);
$table->set_style($styles);


in the table lib, my function looks like this:


/**
* Changes the style of a column
* @param string - $field_name
* string - $style_string
* @return $this
*/
public function set_style($field_name, $style_string = null)
{
if(is_array($field_name))
{
foreach($field_name as $field => $style_string)
{
$this->style_string[$field] = $style_string;
}
}
elseif($style_string !== null)
{
$this->style_string[$field_name] = $style_string;
}
return $this;
}



also needed to put some code in some other functions in the library, so that I can retrieve this style_string in the view - not hard to figure out where by a visual parsing of the lib and see where display_as is used or retrieved :-)


and in list.php, for every th or td I have added this style_string like this



<th <?php echo ( isset($column->style_string) && $column->style_string != "" ) ? 'style="'.$column->style_string.'"' : '';?>>
<?php echo $column->display_as; ?>
</th>



Hope this helps :-)

sistemas_dge
  • profile picture
  • Member

Posted 28 November 2012 - 18:49 PM

[quote name='crina' timestamp='1348839135' post='3676']
my solution of a easy customizations for the table columns[u][i][b] I have defined a $column->style_string the exact same way that $column->display_as is setted[/b][/i][/u] ... and this way you can set colours, widths, text-align and all other sort of CSS for a column.

So you only have to set it from the controller like this:

// Set the styles for columns
$styles = array( 'ACCOUNT_ID' => 'width: 100px;',
'DATE' => 'width: 60px; text-align: center;',
'DESCRIPTION' => 'width: 200px;',
'DEBIT' => 'width: 80px; text-align: right; background-color: #FAD2D2',
'CREDIT' => 'width: 80px; text-align: right; background-color: #D9FAD2',
'TAGS' => 'width: 140px;'
);
$table->set_style($styles);


in the table lib, my function looks like this:


/**
* Changes the style of a column
* @param string - $field_name
* string - $style_string
* @return $this
*/
public function set_style($field_name, $style_string = null)
{
if(is_array($field_name))
{
foreach($field_name as $field => $style_string)
{
$this->style_string[$field] = $style_string;
}
}
elseif($style_string !== null)
{
$this->style_string[$field_name] = $style_string;
}
return $this;
}



also needed to put some code in some other functions in the library, so that I can retrieve this style_string in the view - not hard to figure out where by a visual parsing of the lib and see where display_as is used or retrieved :-)


and in list.php, for every th or td I have added this style_string like this



<th <?php echo ( isset($column->style_string) && $column->style_string != "" ) ? 'style="'.$column->style_string.'"' : '';?>>
<?php echo $column->display_as; ?>
</th>



Hope this helps :-)
[/quote]

[color=#282828][font=helvetica, arial, sans-serif]which one is the table lib? tanks[/font][/color]

sincretec
  • profile picture
  • Member

Posted 12 November 2018 - 03:19 AM

I have modified Grocery CRUD, including :

 

set_style_th($style) and set_style_td($style) functions to control styles of cell

 

It is posible to increase column width, but column width can not be smaller than content or header, option: use the functions to change a smaller font.

 

https://github.com/sincretec/Grocery-CRUD-with-set_style


GT_CRUD
  • profile picture
  • Member

Posted 20 February 2019 - 17:55 PM

Thanks for this solution sincretec and posting it to github, it works for me with 'datatables' theme. 

 

A few other things I did that helped:

 

1. Make the overall table a static width, for example:

	.dataTablesContainer {
		width: 1200px;
	}

2. Apply more CSS to the <th>s and <td>s for example:

width: 160px; 
display: block;    
float: left; 
overflow: hidden;     
white-space: nowrap;   
text-overflow: ellipsis;

3. Grocery Crud also now allows you to change the number of characters displayed in each column. Here is what I used:

$config['grocery_crud_character_limiter'] = 100;

Those things, plus a few more minor CSS edits helped display the data the way I like it.

 

Thanks again sincretec and especially Johnny Skoumbourdis (and team) for making such an awesome CRUD!