Is it possible alter render of <th> widths?
- Single Page
Posted 21 September 2012 - 13:29 PM
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!
Posted 25 September 2012 - 08:18 AM
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!
Posted 28 September 2012 - 13:32 PM
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 :-)
Posted 28 November 2012 - 18:49 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 :-)
[/quote]
[color=#282828][font=helvetica, arial, sans-serif]which one is the table lib? tanks[/font][/color]
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
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!