Campaign > Articles table runs over container range

[yunjuc]

The article table under Campaign > Articles is out of the border on the live site, but looks normal on the local dev environment. https://dashboard.wikiedu.org/campaigns/spring_2018/articles

[ragesoss]

Hmm... I guessing it's from long course names in the last column. Maybe we can make it wrap instead?

[RDenPen]

I made an edit to the modules/_tables.styl file so that the td children of the .table class each had a padding of 12px 9px, which seems to pull the article table away from the edge of the screen

[ragesoss]

That helps a little bit just by reducing the padding between cells, but it still runs over a little bit.

I haven't been able to pin down why exactly that table isn't respecting the CSS width settings, but things like adding overflow-wrap don't seem to help.

[RDenPen]

trying to make the class course_title fit in the container using word-break instead of making the padding smaller on .table which hasn't had results, however adding word-break to .table makes does have effect

[ragesoss]

@RDenPen it looks like the main way to make sure the table fits in the container would be to use table-layout: fixed. See https://css-tricks.com/fixing-tables-long-strings/

However, it looks like it'll take a lot of tweaking to get the cell sizing working nicely with the fixed layout.

[RDenPen]

so I made it so the element table had a table-layout of fixed this didn't stop the articles from spilling over. I also applied word-break: break-all then the articles didn't run over the container range

[siwaniagrawal]

The issue has been solved? If not can I contribute to it?

[ragesoss]

It has not been solved and you're welcome to work on it. It's not as easy as I thought at first though.

[siwaniagrawal]

Well, I can give it a try :)

[siwaniagrawal]

Is this okay? Or should I make some more changes? @ragesoss

[ihsavru]

@siwaniagrawal The courses column looks good. It will be great if you could do the same thing to the Title column.

[siwaniagrawal]

Actually, I am inspecting it in the browser, Can you please guide me through the process of feeding the necessary resources so, I can recreate the same in my local.

[ihsavru]

@siwaniagrawal Setup the dashboard on your local machine if you haven't already. Populate your database with some courses having longer names.

[siwaniagrawal]

I realized using text-wrap along wouldn't be enough so, had to resize the width. will this do? Or should I make some more changes?

[ragesoss]

@siwaniagrawal that looks nice.

[siwaniagrawal]

Cool, I will raise a PR after populating the DB and recreating it in my local.

[Rish-av4]

I don't understand the problem statement. Like where is the problem? A little help would be appreciated.

[ragesoss]

The problem is that the final column of the campaign articles table extends outside the container. All the content should remain with the container with a max width of 1100px.

[fillingtothemomo]

If this issue is still open, I would like to take it. @ragesoss

[ragesoss]

This is fixed, I think.