Trying replace table with 4 colums

Request Type:

Feature Request

Forums:

Author:

Nadine Amalfi

Issue/Request:

I am trying to use float code to create 4 columns for the list of names on this page. Right now I have enabled - https://ccs.yale.edu/ccs-people/faculty-fellows - for this page, but the list of names are in a table which goes completely wonky on a phone.

I have another page using the float code - https://ccs.yale.edu/ccs-people/student-fellows/pre-doctoral-fellows# - but this is set as “full HTML” so the code seems to work

On the test page the float code appears to work in “filtered HTML”, but when I save it the code disappears.

Is there a way to do this in filtered HTML? It is much easier to update the page that way.

Zachary Schwartz on March 12, 2019:

Hi Nadine,

Generally speaking, we advise strongly again using tables for layout, based both on the reason you already mentioned and because it can present an accessibility concern.

Based on my experience with attempting more complex styling and layouts with the filtered HTML text format, I don’t believe you’ll be able to accomplish this without resorting to the full HTML formatting option. Filtered HTML is overaggressive in stripping out any formatting that can’t be achieved through the standard text editor, so in the past others have had issues like yours where more specialized formatting was necessary.

There are other options—chiefly, you could set a CSS rule for content of this type and use that to govern the names in the list to format as you like them. But not everyone is comfortable using CSS, and I unfortunately don’t know the exact CSS you would need to write to make that happen. If that’s the route you’d like to investigate, I can ask a colleague with more experience in that area.

I hope this answers your question! Please let me know whether you’d like for me to reach out to my collague about this.

Best,

-Zach

Nadine Amalfi on March 12, 2019:

Hi Zach,

I would like to use CSS to create the ability to use 4 columns without having to use HTML for entire page - the page is long and changes often. While I understand how to use HTML, if others needed to update this page they might not know how to. I have the CSS injector module enabled but am not sure how to set up the code - I don’t want to make a mistake and cause my site to become unstable. Please see if someone can help with this. Thanks!

Chao Hang Lu on March 21, 2019:

Hi Nadine,

To make a table responsive you will need to have breakpoints. YaleSites breakpoints from desktop to mobile breakpoints are 1024px, 798px, 640px, 480px.

Making columns there are several options you may use floats, inline-block, flexbox, grid and many other methods out there.

Here is a example you can use on your site:

#node-page-921 .field-item div > ul{
column-count:4;
}

@media screen and (max-width:798px){
#node-page-921 .field-item div > ul{
column-count:3;
}
@media screen and (max-width:640px){
#node-page-921 .field-item div > ul{
column-count:2;
}
}
@media screen and (max-width:480px){
#node-page-921 .field-item div > ul{
column-count:1;
}
}

Please note few may not support IE11 browser.

Thank you
- Chao Hang Lu