Most of the plugins have wide output. The 6-col layout they all have is too small.

[cooperaj]

I have to shrink my desktop browser window down just enough to force the middle size so that the plugins don't do some weird overlapping content thing. Also if the table columns are too wide for even that you end up with a bit of a mess. I've got a fix in place for this last case but not the first. Would you like me to put a pull request together for them?

[cooperaj]

I say fix. It's a partial fix to limit column size and put in an overflow with ellipsis otherwise. But it works. For the most part.

[tvbeek]

Can you create a screenshot how the weird things are? Because I didn't have it or don't understand what you mean.

[gumeniukcom]

Like this: https://www.dropbox.com/s/r14mvlyax4ry2j7/Screenshot%202015-01-21%2014.16.30.png?dl=0

[cooperaj]

Yep.

https://www.dropbox.com/s/9do6cg7dc0k7pzz/Screenshot%202015-01-21%2011.17.45.png?dl=0

[cooperaj]

Making all the plugins 12 wide mitigates the issue a lot but doesn't solve it. The css

#plugins table td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Helps to mitigate it further but isn't perfect. I think we may need a javascript solution to do some dynamic scaling based on column importance and include the ability to see the full value (which the css above fails at)

[tvbeek]

Strange, I didn't have this. Do you run the latest version? Can you tell me what your browser is? I have test it with Firefox, Chrome, Internet Explorer and Safari.

[cooperaj]

I'm running Safari 8 (OS X Yosemite). Heres a picture from further down the page

https://www.dropbox.com/s/aa3gizp9ekcskif/Screenshot%202015-01-21%2012.42.12.png?dl=0

The 6 column on large layout thing is down to the line "css: 'col-lg-6 col-md-12 col-sm-12 col-xs-12'," at the top of every plugin file.

Some options I'm investigating for a pull request. http://elvery.net/demo/responsive-tables/#

[tvbeek]

Strange, this is my result with safari on OS X Yosemite (if my window is smaller it will rearrange to content)

[cooperaj]

My code sniffer looks fine too. I think this is just an artefact of the number of columns (3) and the fact the final column can effectively compress to a very narrow width.

https://www.dropbox.com/s/a6xp3y7otf83xi4/Screenshot%202015-01-21%2013.02.47.png?dl=0

Here you can see the bottom of my code sniffer output (looks fine) plus two others that have more then 3 columns and most of them are wide.

[cooperaj]

Found a potential solution.

Bootstrap 3 has a responsive-table class that can be applied with some additional markup that stops this from happening. It allows you to horizontally scroll tables that exceed there parents width. I'll submit a pull request that has the correct alterations as well as some css that helps.

[cooperaj]

Pull request available at https://github.com/Block8/PHPCI/pull/755

[Adirelle]

@tvbeek, also happens to me with Firefox on Win7. PHPUnit plugin has a very large output.

Plus the sortable JS library doesn't handle well the 6-column blocks. I think it expects "block" elements, i.e. only one per row. Trying to drag the blocks to reorder them is a terrible experience.

[tvbeek]

Maybe I didn't have it because I don't use phpunit.