Bug #21340 Bug Fixed

Grid field names & instructions can prevent column width settings from being fully observed

Version: 3.0.3 Reporter: Derek Jones

This is an archived bug report. If you are experiencing a similar issue, upgrade to the latest release and if that does not solve the problem, submit a new bug report

Field names and instructions have a min-width and white-space: nowrap; which can cause the browser to calculate the column widths before observing width="x%" attributes in table cells. This presentation collision can make it appear like the Grid column settings are not being used.

  • This one’s getting to be a game changer, got a grid field with just 4 columns and it’s squishing my Textarea field right up when it ideally needs to be about 50% so my client can easily see the text content :(

    Rob (bluedreamer)
    26th February, 2016 at 2:05pm
  • It’s a little hairy as something’s going to squish; are you using column instructions in those fields that you can modify?

    Derek Jones
    26th February, 2016 at 2:56pm
  • With the fields I have none have instructions, just column headings as:

    Image (File field) 10% Image size (Select field, options Normal/Full so not very wide) 10% Heading (Text field) 15% Content (WYSIWYG/Textarea) 65%

    TH elements in the grid table have min-width: 220px; applied, even though I have % values applied to the columns. With about 1075px of width available (inc cell padding) my Content (WYSIWYG/Textarea) field is only left with about 340px width, so when that field has a lot of text and the WYSIWG is in focus the content expands downwards for miles!

    I think I saw somewhere that James had if on the todo list of bug fixes.

    BTW running latest 3.1.3

    Rob (bluedreamer)
    26th February, 2016 at 3:18pm
  • Is there any update on this one, it’s getting to be a showstopper especially when you have several columns.

    Rob (bluedreamer)
    02nd February, 2017 at 9:28am
  • Hi Rob,

    This is something I am addressing, and it will be fixed in a future version. This was built out this way originally to prevent certain custom field types from collapsing and being unusable, but I was a little heavy handed and made a default min-width based on the table cell, as opposed to based on the field contained within.

    James Mathias
    11th February, 2017 at 3:45pm
  • Any updates on this?

    14th April, 2017 at 9:16am
  • Hi,

    A fix for this will be coming to a later version of the software, but it’s not in yet.

    James Mathias
    14th April, 2017 at 1:19pm
  • Hey any update on this? I updated to the latest version of EE, and now my grids are too small to utilize. The width does absolutely nothing. Perhaps it works well for items with 2-4 grid items, but not when you have more. This is a showstopper as is and I have to figure out how to fix pronto.

    See screenshot: https://www.dropbox.com/s/ffo962ai5m8p7os/Screen Shot 2017-06-05 at 11.49.42 AM.png?dl=0

    05th June, 2017 at 11:53am
  • Hi,

    We put a fix in for this bug, it’s in the latest release. 3.5.7 The fix may require you to apply column widths in the grid field editor to make the columns wide enough for certain third party fields. As table columns now collapse to the smallest version of the content they contain.

    James Mathias
    05th June, 2017 at 12:02pm
  • Correct, it only allows for percentages. I tried a variety of percentages but they have no impact on the column width. It appears when there are too many items, everything just gets smushed. Perhaps if you could input “200px” or something maybe it would override the percentages, but the width column only allows for numbers so I can’t really test that.

    05th June, 2017 at 12:05pm
  • The column width accepts a integer which is converted into a pixel value override on the columns. So if you put in 200 it should be converted to 200px.

    James Mathias
    05th June, 2017 at 12:06pm
  • I set it to 300, it’s output is 300% as shown in the screenshot below:

    https://www.dropbox.com/s/fwj09oqr4j4p8r4/Screen Shot 2017-06-05 at 12.10.53 PM.png?dl=0

    05th June, 2017 at 12:11pm
  • Hi,

    That’s definitely not right, it should be adding a style="min-width: 300px;" to that td Are you on the latest version 3.5.7?

    James Mathias
    05th June, 2017 at 12:24pm
  • I am, yes. Just updated from 3.5.4 yesterday.

    05th June, 2017 at 12:25pm
  • Can you check the file system/ee/EllisLab/Addons/grid/libraries/Grid_lib.php and let me know what is on lines 87 through 97? Thanks!

    James Mathias
    05th June, 2017 at 12:30pm
  • Yup: $attrs = array( ‘class’ => $this->get_class_for_column($column), ‘data-fieldtype’ => $column[‘col_type’], ‘data-column-id’ => $column[‘col_id’] );

    if ( ! empty($column[‘col_width’])) { $attrs[‘style’] = ‘min-width: ‘.$column[‘col_width’].’px’; }

    05th June, 2017 at 12:33pm
  • That is correct, I wonder why it’s not applying the min-width. Can you send an email to team@ellislab.com so that the support team can see if there is something else at play here?

    James Mathias
    05th June, 2017 at 12:48pm
  • OK I sent them an email referencing this exchange. In the meantime, I reverted back the common.css file from 3.5.4 which applied a min-width:220px to the column head (as well as a whitespace:no-wrap) which at least makes this usable for the client for the moment (hope it doesn’t break something else lol).


    05th June, 2017 at 12:52pm
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases