Bug #5405

webui: dvr fanart overlap bottom toolbar when description text is too long

Added by Pablo Zerón over 1 year ago. Updated over 1 year ago.

User Interface
Target version:
Start date:
Due date:
% Done:


Estimated time:
Found in version:
Affected Versions:


When the text overlap the bottom toolbar is not possible to use the buttons, you must enlarge the popup window to be able to use it again. My skills with css and html is very poor, so I think @azlm8t can get a solution faster than me. :)

Associated revisions

Revision 55f7bf00 (diff)
Added by Em Smith over 1 year ago

ui: Enable scrollbar for dialog info, fixes #5405

When the dvr info dialog has a lot of text it was overflowing
on to the buttons in the bbar.



Updated by Pablo R. over 1 year ago

I was talking to him about the size of the window since It cut the buttons below - on Spanish lang for example - and it was necessary to enlarge it. I hope he considers both proposals.


Updated by Em Smith over 1 year ago

I've been looking at it but can't yet determine why the epg dialog has a scrollbar (if you make the dialog smaller) but the dvr dialog doesn't.

The css overflow is the same for both (auto), and changing it in the debugger to values such as scroll doesn't seem to make any difference in the dvr dialog. The buttons (fbar) appear fixed to the bottom of the dialog and the dialog body overflows the dialog and footer. I tried removing the background image (using the debugger) but that didn't seem to make any difference to the dialog overflowing.

For the other problem of translated button toolbar width, I also tried a number of variants at the weekend to automatically size the dialog so the buttons are fully displayed for non-English translations. Unfortunately, I couldn't get the fbar to give a "natural" width that it would like to have which could be used for resizing the dialog width in an "afterlayout" callback.

I'm sure the solutions to both will be obvious after we work it out.


Updated by Pablo Zerón over 1 year ago

Both has scroll bar activated, but the epg tab don't use the "dvr-details-dialog" classes, so if you change the position from "absolute" to "relative" in the "dvr-details-dialog-content" class, the scroll bar appear, but by other side the background image lose it position showing it first and then the description.

I have tried differents aproach, but I'm no good with html and css, so no luck.


Updated by Em Smith over 1 year ago

I've submitted a PR that creates the scrollbar. I tested it by resizing the dialog to be too small for my existing text (since I have no programmes with as much text as yours!)

The text now scrolls (as you can see on the scrollbar on the right). The image still overlaps the buttonbar, but because it is transparent it's not as bad an issue (I think) and looks reasonable.


Updated by Jaroslav Kysela over 1 year ago

@Em: perhaps, both positions should be 'absolute' ?


Updated by Em Smith over 1 year ago

Just tried it. If both are absolute then the scrollbar does not appear for the text.


Updated by Em Smith over 1 year ago

So, it seems that it only works with the text as relative, in which case the dialog can be resized and a scrollbar appears. (At least, it does on Firefox...)


Updated by Pablo Zerón over 1 year ago

It's ok, but when the image overflow the bbar, you still can't using the buttons like next, previous, etc., the strange thing is that you only can use the combobox.


Updated by Em Smith over 1 year ago

I've pushed an update which should stop the event being captured by the image. Can you test it works in your browser?
(Image still overflows but all buttons should not be clickable).


Updated by Em Smith over 1 year ago

Pushed an update to the PR, no commit has been made.


Updated by Pablo Zerón over 1 year ago

Now the buttons are working, thanks.


Updated by Em Smith over 1 year ago

  • Status changed from New to Fixed
  • % Done changed from 0 to 100

Also available in: Atom PDF