3

I need to set up a Grid field with several columns – perhaps 5 or more. When this field is presented in the Publishing page the columns get very narrow unless the user has a very wide browser window (which of course cannot be assumed). Does anybody know of an add-on or some other way to alleviate this issue – perhaps something that lets columns be sized in pixels rather than percentages and allows the Grid field scroll sideways on the publishing page, the same way it does when it is being defined?

2

If you'd rather give Grid tables a fixed width so that the individual columns don't get compressed, you can add your own css rule using override.css.

table.grid_field {
    width: 1500px !important;
}

This will force horizontal scrollbar for screens not wide enough and keep the grid column widths reasonable.

Instead of doing this globally, it may be more useful to target a specific Grid field. You can use a field_id-specific selector like #field_id_63 table.grid_field (just make a note of your field_id or use the web inspector to see it).

As an alternative to override.css you can also put a style tag right into your field instructions.

Update:

If you'd rather not have the Grid field sticking out off the side of the page, you could set overflow: scroll; on the .grid_field_container_cell which will keep everything neatly contained in the publish form, but still give you a horizontal scrollbar.

table.grid_field_container td.grid_field_container_cell {
    overflow: scroll;
}
| improve this answer | |
  • That's great Alex, thanks. Actually I couldn't get the css to take unless I included the field id as per your 2nd example. A more global selector (without the field id) was not recognised in the CP. Style tag in the field instructions also worked. It's a shame that the grid field then busts clear out of the containing box in the CP and uses the browser window's scroll bar. I had hoped that it would scroll within the containing box, the way that it does when one is defining the field columns. No matter. It's a slightly ugly solution, but a solution nonetheless. Cheers. – RickL Feb 10 '14 at 20:57
  • Ah, yes. I think the more general declaration probably needs !important (I updated my answer), but I'm glad this did the trick. – Alex Kendrick Feb 10 '14 at 23:00
  • Rick, I updated my answer after realizing this could be cleaner by setting overflow:scroll on the Grid field container element. This will keep wide, fixed width Grid fields contained in the publish form but still give you a horizontal scrollbar. – Alex Kendrick Feb 13 '14 at 14:59
  • Ah, both of those adjustments work a treat Alex, thank you. – RickL Feb 13 '14 at 22:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.