View cut off on 4:3 monitor

[nyquist2205]

Describe the bug
On 4:3 monitors, the right side of the "My Times" view is cut off. In a way that you can't access the "Actions" buttons.

To Reproduce
Steps to reproduce the behavior:

1. Get a PC with 4:3 screen
2. Go to Kimai2 Demo site

Expected behavior
I think horizontal scrollbars would be okay as 4:3 monitors are not really the standard anymore.

Desktop (please complete the following information):

• OS: Windows 7 Pro
• up to date Chrome and Firefox

Additional context
Sure, 4:3 screens are rare now, but i have one at my workshop and can't stop a running entry this way...

[kevinpapst]

Uff, thats a hard one.
I already wrote in the requirement section

A modern browser, Kimai v2 might be broken on old browsers like IE 10

Probably I should extend it to:

A modern monitor ;-)

An easy solution is to use the "column filter" which you can access in the upper right via the eye icon.
Simply hide project and description?

Edit: and you are using the demo, which creates quite long fake data.

[nyquist2205]

Yes, i know my monitor is oudated a bit... But espacially in workshops/labs they still can be seen as fixed ones on a shelf.

But okay, if its hard to fix (I'm not into it too much) the workaround with hiddens columns will work. Because even in my "production" environment there are several longer entrys so the actions are hidden.

[kevinpapst]

Hm, good argument. I didn't say I can't or don't want to fix it.
It just never occurred to me that someone would use horizontal scrolling.

Can you do me a favor and test that in your installation:

• Edit this line: https://github.com/kevinpapst/kimai2/blob/master/templates/macros/datatables.html.twig#L77
• Add the class table-responsive so it changes from <div class="dataTables_wrapper form-inline dt-bootstrap"> to <div class="dataTables_wrapper form-inline dt-bootstrap table-responsive">
• Clear your cache: bin/console cache:clear

There won't be scrollbars, but you should be able to swipe the table.

[nyquist2205]

So, tried it out right now. This creates a horizontal scrollbar with every monitor setup (15" laptop, 24" desktop, 19" 4:3 monitor).
I like it for the 4:3 one, but you're right, on the "normal" ones it's not really state of the art. Maybe activate this only for screens under a specific width? Or really based on the ratio?

This is the 4:3 one (sorry, had to hide my information...):

[kevinpapst]

Ok, good to know that this could be one option to solve this problem.
Lets wait if there is more user feedback in the next time. I wonder why I didn't saw any scrollbars, no matter how small I resized my window...

I will think about how this could be integrated as plugin or setting - this shouldn't be activated by default IMO.

[nyquist2205]

I wonder why I didn't saw any scrollbars, no matter how small I resized my window...

Maybe that's because I've the release 0.7 installed and none of the newer commits. I've also seen some differences in the datatables.html.twig.

But ok, I'm fine now, having the scrollbar - thanks ;-)

[kevinpapst]

With the latest release 0.9 you can install the CustomCSS extension:
https://www.kimai.org/store/keleo-css-custom-bundle.html

There is a CSS rule included which activates the responsive table, so you don't have to edit the template.
Another rule changes the customer/project/activity labels: they are allowed to "wrap", so they might line-break to avoid taking up too much space.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. If you use Kimai on a daily basis, please consider donating to support further development of Kimai.