Thank you for your donation!


Solved: CSS problem
#1
I need help from a CSS expert...
On my 2560x1440 screen, when I show the library, the songs are shown below the album cover. When I change the resolution to Full HD, the problem disappears.
So, I assume there is some parameter in one of the CSS files that is just set a little too high...

Here on a resolution of 2560x1440:
[Image: blkmbwcsbba.jpg]


And here on a resolution of Full HD (1920x1080)
[Image: qdzcaa.jpg]
 Angry
Reply
#2
aha... I thought the first image was how it was meant to be and wondered....

Thanks for showing the second....obviously my hardware is not sufficient to show this correct version.

I will add my +1 for a fix.
Reply
#3
Hi,

A quick attempt at a repro in my simulator and Im not seeing any issue at 2560x1440.

   

-Tim
Reply
#4
(07-15-2018, 10:40 PM)Tim Curtis Wrote: Hi,

A quick attempt at a repro in my simulator and Im not seeing any issue at 2560x1440.



-Tim

Well Tim, as you can see from the pics, I do have the problem, and not with a simulator, but in real time....
It's probably some setting which is really at the edge of going well or wrong, something like a percentage of the size of a screen. We only have to find where exactly.
Can you tell me what file I would have to look into?
It's the file in which the webbrowser settings are configured.

J
 Angry
Reply
#5
Hmmmm…. found the following in the panels.css file (/var/local/www/cssw)
Code:
.lib-entry {padding:0 .5em;}
.lib-entry-song {margin-left:4px;padding-top:4px;line-height:normal;margin-right:26px;}
.lib-action {position:absolute;top:50%;transform:translate(0%,-50%);} /* r42x click whole line for menu */
.lib-action .btn {font-size:.9em;line-height:normal;margin-top:.45em;padding-right:100vw;opacity:0}
#songsList li.active {font-weight:700;}
#trackscontainer {width:calc(84vw - 10px);max-width: calc(100vw - 215px);float:right;}
#m-countdown {padding-right:5px;font-size:10px;}
#m-total {font-size:10px;padding-left:5px;}
#random-album {margin-top:-1.5em;float:right;opacity:.3;position:relative;padding:.25em .5em 0em .5em;} /* r42y */
#timeline {margin-left:auto;margin-right:auto;padding-top:5px;}
.timeline {width:85%;display:none;}
#timetrack {display:inline;width:100%;padding-left:0px;padding-right:0px;margin-top:5px;}
.timetrack {height:1px;}
/* r42x screen saver */
Originally it said:
Code:
#trackscontainer {width:calc(85vw - 10px);max-width: calc(100vw - 215px);float:right;}

I changed it to:
Code:
#trackscontainer {width:calc(84vw - 10px);max-width: calc(100vw - 215px);float:right;}

...and...bingo: my problem was solved.
It even looks better than in Full HD, because the track number isn't glued to the album cover.
Can you have a look at this, Tim, and fix it in the next version?
Thx,
Johan

[Image: lzrb6frjyape.jpg]
 Angry
Reply
#6
Maybe @swizzle can comment, but sure I'll test the change to see if it produces any side effects at other resolutions.

-Tim
Reply
#7
(07-15-2018, 11:45 PM)Tim Curtis Wrote: Maybe @swizzle can comment, but sure I'll test the change to see if it produces any side effects at other resolutions.

-Tim

Great!
Thx dude!

Johan

3rd Five O on it's way.... Smile
 Angry
Reply
#8
Code:
#trackscontainer {width:calc(84vw - 10px);max-width: calc(100vw - 215px);float:right;}

Worked here too.(1920x1080)   Thanks Johan !
Reply
#9
Nice :-)

What res is your display Bob?

EDIT: lol, got it thanks.

-Tim
Reply
#10
Changing to 84vw won’t be the fix but it’s good enough until Tim gets 4.2.1 out. Smile
Reply


Forum Jump: