Coder Social home page Coder Social logo

Comments (2)

Rello avatar Rello commented on July 20, 2024

Hello,
yes, the file list will overlay the albums below.
Unfortunately my css knowledge is limited in this area. If someone can support here - happy to take suggestions

from audioplayer.

Slackadays avatar Slackadays commented on July 20, 2024

Looks like you might not need any fancy CSS trickery, just a couple simple CSS and programmatic changes:

  1. Change the position of .songcontainer from absolute to static
  2. Add a margin-bottom of 10px to .songcontainer
  3. Remove the padding-bottom from .coverrow
  4. Inject the div.songcontainer element right after the rightmost album in the row with the selected album.
  5. Set the absolute position of the .open-arrow to be on the top of the new .songcontainer block

1-3 are pure CSS changes, while 4 and 5 would require a code change to compute the rightmost album, put the song container element after that album, and compute the position that the open arrow should have.

Here's an example of what these changes would look like:
Screenshot from 2023-12-11 17-57-36
Screenshot from 2023-12-11 18-07-55

I did some research to see if this might be possible to do in pure CSS. Unfortunately, although we might be able to place the albums below the song container element, we can't know if we should do so or not because CSS lacks a way to check if they are covered using selectors alone, or if their position is below that of the song container. Check this out for a potential way to do this check in JS: https://stackoverflow.com/questions/49751396/determine-if-element-is-behind-another

from audioplayer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.