Ensure that the flex item spans the entire width of the page

I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong...

(Current Look)

https://i.sstatic.net/tEtqA.png

I'm attempting to utilize HTML custom controls to design my JSON Audio-player. Instead of using a premade properties array, I'm trying a different approach with custom controls.

(Desired End Look)

https://i.sstatic.net/eg5vi.png

Take a look at my FIDDLE: https://jsfiddle.net/CAT999/1oL6w5jm/28/

Any valuable insights on how to achieve this?

Note:

This audio player supports playlist functionality through JSON data and step navigation. The current version is a fresh update for this project... focusing on modernizing the style and relying on an external audio player plugin called Plyr (https://github.com/sampotts/plyr).

// Mythium Archive: https://archive.org/details/mythium/

const controls = `
<div class="plyr__controls">

    // Include control button details...

</div>
`;

// JavaScript code block...

.custom-styling {
    // Custom CSS styles...
}
javascriptcssjsonflexbox

Answer №1

Instruct flex items to utilize all the space available.

Include the following in your code:

.player {
  flex: 1;
}

.player__progress {
  flex: 1;
}

Updated JSFiddle link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best practice for importing React components?

In my experience with React, I've noticed two different ways of importing and extending components. The first way that I typically use is shown below. import React from 'react'; class SomeClass extends React.Component { //Some code } ...

javascriptreactjscomponents

Automatically resizing a multi-part CSS background based on content dimensions

My current CSS project has hit a snag that I can't seem to solve: There is a box on the left side of the site that contains three images - a top image, an optional and stretched middle image, and a bottom image. I want this left box to automatically ...

htmlcssbackground-image

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

Make a JSONP request with the MIME Type set to text/plain

I've been attempting to utilize JSONP for fetching a feed from a different domain. Despite knowing that the content type should ideally be JSON or JavaScript, it is currently set as text/plain and unfortunately, I lack control over the server settings ...

javascriptjqueryajaxjson

Manually validate inputs in Angular

I've encountered an issue with the bootstrap datepicker. When I click on the date icon, the date and time automatically populate in the input field. However, the input remains invalid because I haven't directly interacted with it. Has anyone else ...

javascriptangularjstwitter-bootstraptwitter-bootstrap-3

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

javascripthtml

Issues with navigating jQuery UI links while offline in Google abound

Hello, I am a newcomer to jQuery and I am facing an issue with my code. I added the <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> but for some reason, my jQuery is not working. I have tried searching ...

javascriptjqueryajax

What is the best way to individually update fields using Prisma?

I am facing a challenge with updating fields individually for an object named Post. This object has three fields: title, content, and summary. Situation To save a post in the database, I can fill in just the title field initially and leave the other fiel ...

javascriptnext.jscrudprisma

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Is it possible to access the ID of a collection_select and have a list of items appear whenever the selection is modified?

I am working on a form named _form.html.erb <%= simple_form_for(@exam) do |f| %> <%= f.error_notification %> <div class="field"> <%= f.label :Year %> <%= f.collection_select :year_id, Year.order(:name), :id, :name, ...

javascriptruby-on-railsajax

The scrolling on the image listing webpage is not as fluid as desired

I'm currently working on building a website for displaying images in Angular, similar to Google Photos. The site includes a custom scrollbar that displays the month and year. I want the image list to scroll when the user moves the scrollbar thumb. Her ...

javascriptangularimage

Guide to running a NextJS app alongside an Express server backend on the same localhost port

I'm working on hosting my NextJS app, which is built with React, on the same localhost port as my express api-server backend. Within my express server API settings, I have configured my API server to listen on: http://localhost:3000/graphql How can ...

javascriptreactjsexpressnext.js

Numerous references embedded within a Vue.js component

I am currently working with multiple instances of a polygonCrop component in Vue.js, each one having a unique reference to a canvas property. These components are utilized in separate crop functions triggered by button clicks. My question is how to effecti ...

javascriptvue.js

Should one choose PHP as the programming language for developing a extensive JSON api like mochi?

I've been experiencing frequent downtime with my Django site. This has me considering switching to a simpler solution like PHP to import games into my database and S3 using the following API: url: The API contains over 13,000 games along with flash f ...

phpmysqljsoncronmochi

What is the process of utilizing the JSON value within an AJAX function to integrate with a JSP

Why am I getting an undefined value outside the Ajax function when trying to generate a table with JSON data printed in both the console and JSP? <head> <title>Unique Spring MVC Ajax Demo Title</title> <script type="text/javascript" s ...

jsonajaxjsp

Implementing server-side range filter in vue-tables-2: A step-by-step guide

I am currently using a server-side VueTables-2 component to display data from the database. The table includes columns with numeric, textual, and date values. My issue lies with filtering the numeric columns. I am trying to incorporate options for range f ...

javascriptvue.jsvuejs2vue-tables-2

What are the steps to establish a class structure using deserialized JSON data?

I am struggling to create a C# class for the returned JSON data that I have. It seems like I cannot correctly map it based on the JSON structure I am working with. Even after attempting to use the "Paste Special -> Paste Json as classes" feature in Vis ...

c#jsonasp.net-mvc

error occurred while looping through json array

i am encountering an issue with a code that keeps returning an "undefined" message instead of the expected HTML output. Purpose of function: the aim of the following function is to display notifications in a manner similar to those on Facebook. The code se ...

javascriptjqueryjson

What is the best way to alternate between displaying HTML content with v-html and plain text in Vue.js?

I need a way to switch between v-html and plain text in Vue.js v2. Here's what I have so far: HTML <div id="app"> <h2 v-html="html ? text : undefined">{{html ? '' : text}}</h2> <button @click=&qu ...

javascriptvue.js

Different syntax issues in Firefox and Internet Explorer are causing errors

While this code successfully runs on Firefox, it encounters errors when used on IE. document.getElementById('zip_container').style.borderLeft = '1px solid #D9D9D9;'; In this code snippet, zip_container refers to a div element. If any ...

javascriptcss