Alpha Picker - change from vertical to horizontal?

[user24 84]

Hi all, I have found some CSS in other forum threads to change the Alpha Picker font size and color and can get that working.

I was wondering if it was also possible to change the Alpha Picker to a horizontal bar across the top of the screen just below the top menu tabs?

For this to work as I am imagining, the Alpha Picker would need to be part of the top header section so that, when scrolling down and up, it disappears and reappears the same as the menu tabs do. (The scroll bar would stay on the RHS and scrolling would still be up/down.)

Here are images of what I have now and what I would change it to if it is possible?

If this is easy - then great! If not - no worries! Thanks...

[Happy2Play 8282]

Something quick and dirty like this.  Probably will need tweaked per other tabs potentially different variables for top and left but is a good start.

But will have a scroll issue.

div.view-music-music div.alphaPicker {
    flex-direction: row;
    top: -44vh;
    left: 20vw;
    inset-inline-end: unset;
    bottom: 0;
}

div.view-music-music div.alphaPickerRow-vertical {font-size: larger;}

div.view-music-music div.alphaPickerRow {flex-direction: row;}

div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;}

 

Not ideal but reworked for scrolling as you end up with a bigger header basically.

div.view-music-music div.alphaPicker {
    flex-direction: row;
    top: -65%;
    width: 100%;
    inset-inline-end: unset;
    background:var(--header-blur-background);
    -webkit-backdrop-filter: blur(4em) saturate(2.1);
    backdrop-filter: blur(4em) saturate(2.1);
    padding-top: 130px;
}

div.view-music-music div.alphaPickerRow-vertical {font-size: larger;}

div.view-music-music div.alphaPickerRow {flex-direction: row;}

div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;}

Edited February 22 by Happy2Play

[user24 84]

Thanks! This is a great starting point!  With the first example I used top: -52vh and left:9.7vW for almost perfect alignment:

As you would have have figured out when you tested it, the first "side-effect" is that the Alpha Picker remains fixed while everything else moves up/down behind it:

An interesting experiment though and It works well functionally, but the second "side-effect" means it isn't a practical solution:

• Using a touchscreen, you can only scroll using the vertical screen area to the left of "#" and to the right of "Z" (still somewhat usable).
• The vertical area under "#" through ""Z" does not work using the touchscreen or the touchpad/keyboard controls (impossible to make a selection).

So, onwards to the revised code:

it may work better, but one (or more) of the settings is giving me a header that takes up roughly 90% of the screen area making it difficult to test. I've run out of time now to altering the settings, so am posting what it looks like in case you see this before I manage to get back to it.

Anyway, it looks like a good solution may be technically possible. All for now... thanks again!

Edited February 22 by user24

[user24 84]

Getting closer now. Added the first line of code below, which brings up the bottom of the header division. But I then need to alter the "top" percentage to stop the alpha picker letters moving off screen.

div.alphaPicker-vertical {height: 70%;}

div.view-music-music div.alphaPicker {
    flex-direction: row;
    top: -30%;
    width: 100%;
    inset-inline-end: unset;
    background:var(--header-blur-background);
    -webkit-backdrop-filter: blur(4em) saturate(2.1);
    backdrop-filter: blur(4em) saturate(2.1);
    padding-top: 130px;
}

div.view-music-music div.alphaPickerRow-vertical {font-size: larger;}

div.view-music-music div.alphaPickerRow {flex-direction: row;}

div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;}

It's not quite there yet. I'll need to play around with the "height" and "top" numbers a bit more to get it looking right, unless there is another simpler way?

But, other than that, it seems to be all functioning correctly as far as I can tell at the moment......

Edited February 23 by user24

[user24 84]

@Happy2PlaySome positive progress with the alignment... A bit of guesswork involved,  as I'm still not sure exactly how all the different elements act together, but this worked out not too badly (It's probably really bad code from me though).

div.alphaPickerRow-vertical {height: 130%}
div.alphaPicker-vertical {height: 10%;}

div.view-music-music div.alphaPicker {
    flex-direction: row;
    top: -5%;
    width: 100%;
    inset-inline-end: unset;
    background:var(--header-blur-background);
    -webkit-backdrop-filter: blur(4em) saturate(2.1);
    backdrop-filter: blur(4em) saturate(2.1);
    padding-top: 130px;
}

div.view-music-music div.alphaPickerRow-vertical {font-size: 100%;}

div.view-music-music div.alphaPickerRow {flex-direction: row;}

div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;}

With the Alpha Picker letters spaced out, taking up the full 100% screen width, I reverted back to a smaller font size, as it is very easy to select them. It all works surprisingly well, much better than I was expecting. I think it's a keeper! I'll probably still be finessing it for a while though......

[Happy2Play 8282]

Not sure why you had to add the first two to the code but since you did not target it it will potentially affect all alpha pickers.  

But your image is now like my image above.

[user24 84]

Yes, you are correct. This did mess up my Movie library. I have now fixed that up by using this instead:

div.view-music-music div.alphaPickerRow-vertical {height: 130%}
div.view-music-music div.alphaPicker-vertical {height: 10%;}

All good now. I am slowly learning what I am doing!