Jump to content


Is it possible alter render of <th> widths?

render th table

  • Please log in to reply
5 replies to this topic

#1 MightyPolo

MightyPolo

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 21 September 2012 - 01: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!

#2 MightyPolo

MightyPolo

    Newbie

  • Members
  • Pip
  • 2 posts

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!

#3 crina

crina

    Member

  • Members
  • PipPip
  • 17 posts

Posted 28 September 2012 - 01:32 PM

my solution of a easy customizations for the table columns I have defined a $column->style_string the exact same way that $column->display_as is setted ... 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 :-)

#4 sistemas_dge

sistemas_dge

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 28 November 2012 - 06:49 PM

my solution of a easy customizations for the table columns I have defined a $column->style_string the exact same way that $column->display_as is setted ... 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 :-)


which one is the table lib? tanks

#5 sincretec

sincretec

    Newbie

  • Members
  • Pip
  • 1 posts

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/s...-with-set_style



#6 GT_CRUD

GT_CRUD

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 20 February 2019 - 05: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!







Also tagged with one or more of these keywords: render, th, table

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users