Problem displaying charts about webtrees-theme-justlight HOT 5 CLOSED

I see what you mean. Simply adding a scrollbar doesn't work. So I need to find some other solution.

from webtrees-theme-justlight.

This is not something that could be solved easily, because this is the way webtrees charts works. You will see the same behavior in the default theme. I tried different things already but without success. I am not even sure if this can be fixed from the theme.

I leave this issue open for now to investigate this further, but I remove the 'bug'-label because this is not a theme bug.

from webtrees-theme-justlight.

Hi Carmen,

That's not my experience, see the attached screen dump using the webtrees theme where a horizontal scrollbar allows the right hand side of the chart to be seen

from webtrees-theme-justlight.

Hi Carmen,

I've been having a look at this problem and I can see a couple of problems. Fixing them is simple but I've no idea what impact they'd have elsewhere in the theme

1. The first is overflow:hidden on #wrap; by removing this (or setting to overflow-y:hidden) a scroll bar appears allowing the right hand side of the chart to be made visible.
2. Because most elements on a chart are absolutely positioned, the width set on the .container class is quite likely to be exceeded.

In addition I notice that you're setting box-sizing to border-box. I agree this is better and do it in my theme, however most of the charts calculate box size and position in code (you'll see lots of inline style stuff in any chart) and unfortunately those calculations assume box-sizing to be content-box (the joining lines and box spacing can go haywire if not set to this) and the way you're currently set up makes it difficult to change.

I found this quite elegant solution some time ago - I thought it was being submitted to the bootstrap team but if it was it doesn't seem to have been accepted (so far)

set your styles as follows:

html {
    box-sizing: border-box;
etc.
}

*, *:before, *:after {
    box-sizing: inherit;
}

I then create the following style to target any chart related stuff (and of course anything below this element now inherits it's box-sizing setting)

.charts_block,
[id$='_chart'] {
    box-sizing: content-box;
}

Hope this is of some use

from webtrees-theme-justlight.

Hi David, thanks for figuring this out. I was completely on the wrong track.

But with your input I have fixed it. Tested it and seem to be working ok in all areas.

90227ee

from webtrees-theme-justlight.