Adjusting the size of a neighboring div to match the width of the audio control component

Looking for a solution with CSS styling: I have a parent div element and two nested div elements, one containing an audio control of unknown length. My query is how to make the first nested div adjust its width based on the audio control.

The goal is for the title to display in a single line and be truncated if it goes beyond the intended width.

Currently, setting max-width to 100% does not work due to the undefined width of the parent div. Expansion of the parent div beyond the audio control's width needs to be prevented.

.outer: {
  border: solid black 1px;
  display: inline-block;
  margin: 5px;
  padding: 5px;
}

.audio_text: {
  background-color: #888;
  color: #f00;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap
}
<div class="outer">
   <div class="audio_text">My Title</div>
   <div><audio src="audio.mp3" controls></audio></div>
</div>

Seeking guidance on keeping text from expanding the parent div size unnecessarily.

htmlcss

Answer №1

If you want to achieve a specific effect, you can consider using the following approach. By setting the title's position:absolute, it will not impact the parent width and will expand to fit the width defined by the audio tag. Additionally, applying overflow properties will allow you to truncate the title if it becomes too long.

.outer {
  border: 1px solid black;
  display: inline-block;
  margin: 5px;
  padding: 5px;
  position: relative;
}

/* To create the necessary space for the title*/
.outer:before {
  content: "A";
  visibility: hidden;
}
/**/

.audio_text {
  position: absolute;
  right: 2px;
  top: 0;
  left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio_text: {
  background-color: #888;
  color: #f00;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
<div class="outer">
  <div class="audio_text">My Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>
<div class="outer">
  <div class="audio_text">very very looooooooooooooooooooooooong long Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>
<div class="outer">
  <div class="audio_text">Another long Title</div>
  <div><audio src="audio.mp3" controls style="width:80px;"></audio></div>
</div>

Answer №2

The audio control inside the second child div can be of any length, or at least that's what I assume.

<audio> is treated as an inline element and has default widths of 300px in Chrome, 270px in Firefox, and 250px in Safari (I haven't tested IE / Edge).

To address this, you can set a fixed width of 300px for the container and then assign width: 100% to the audio element.

For example...

.outer {
  border: solid black 1px;
  width: 300px;
  margin: 5px;
  padding: 5px;
}

audio {
  display: block;
  width: 100%;
}

.audio_text {
  background-color: #888;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="outer">
  <div class="audio_text">My Title My Title My Title My Title My Title My Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>

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

Controlling Formatting in ASP.NET

Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...

asp.netjavascriptcsscontrolsformatting

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

i am looking to implement an input field that can be used to edit the title of the currently selected element component (the selection is made by clicking). The challenge here is to have a single input that works for each individually selected element. I h ...

javascripthtmlvue.jsvue-component

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

htmlcssflexbox

Retrieving data from a Ruby class based on a specific condition

Currently, I have a code snippet that adjusts the formatting of an editing page based on the number of values a question contains. <% (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aa9b8484eadbdfcfec8cdcac3c5c484dbc6ece0 ...

htmlruby-on-rails

Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website. If you would like to take a look, here is the link to my jsfiddle page. Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it& ...

javascriptjqueryhtmlcss

Execute a separate function when clicking on certain buttons without interfering with the buttons' original onclick function (which has already been assigned) - JavaScript

While I am still relatively new to JavaScript and learning, I have developed a webpage with multiple buttons that trigger different functions on click events. However, I would like to additionally call another function when any of these buttons are clicked ...

javascripthtmlcssonclick

Choose multiple table cells as a unit

In this scenario, I am looking to group select multiple cells within a table. The desired functionality includes being able to click on a target cell to select it, as well as the ability to achieve selection by clicking and dragging to cover multiple cells ...

javascriptjqueryhtmlgrouping

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

javascripthtmlcss

Reveal the hidden div by sliding it up from the bottom

I have a container with brown branches resembling the image, and I'm looking to hide it. When a button is clicked, I want it to reveal from the bottom to the top, almost like it's being unmasked. I've ruled out a typical bottom-up slide anim ...

javascriptjquerycss

Touching a link within an absolute DIV in CSS on mobile devices is not responsive

When I try to click on links inside a div with the position:absolute style, they don't seem to work on my Android mobile device. However, they work perfectly on both Chrome and even IE8 on my desktop. Removing the style makes the links functional. Th ...

htmlcssmobile

Is there a way to apply the css blur filter without losing the opacity of the edges?

I'm experimenting with adding a CSS blur filter to an image while keeping the opacity intact. When I test it with a simple blue square image, the edges become transparent and reveal the underlying black div. Is there a way to achieve the blur effect w ...

htmlcsscss-filters

How can I prevent Bootstrap from conflicting with my custom styles?

My HTML menu was functioning perfectly with specific CSS styles, until I decided to add a Bootstrap reference in the header: New Link Added <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> Afte ...

jqueryhtmlcsstwitter-bootstrap

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

Tips for importing a table into R that is only revealed after clicking a button

How can you extract data from a website where you need to navigate through tabs and buttons to access the table? For example, on this site, follow these steps to view the table: Click 'Graduation and Beyond' Click 'Postsecondary Continua ...

htmlrxmlweb-scrapingrvest

What is the best way to implement overflow hidden in an unordered list?

My goal is to achieve the following: - - I am struggling with keeping my unordered list on a single line with overflow:hidden. I want the ul to flow naturally without restructuring the HTML or using absolute positioning for the arrows. Can you help me w ...

htmloverflowcss

Navigating the waters of adding a CSS property to a jQuery variable pseudo selector

Is there a way to adjust the top position for $myClass both before and after? I attempted to do so with the following code: var $myClass = $(".myclass"); $myClass.filter(":before,:after").css("top",-23); ...

javascriptjqueryhtmlcss

Utilizing jQuery to determine the placement of a tooltip within a slider

I am currently utilizing both a jQuery Tooltip and a jQuery Slider (jQueryUI) simultaneously. While the slider is functioning correctly, I am encountering an issue where tooltips are being displayed in the wrong position after scrolling (view screenshot or ...

jquerycssjquery-uislidertooltip

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

javascriptphphtmlajaxhttp-referer

JavaScript: Adjust DIV Width Based on Window Height

Is there a way to make the width of a div equal to the height of the window in jquery? I attempted this method: <script type="text/javascript"> $(".rt-container").style.width = $(window).height(); </script> Unfortunately, it did not work. I ...

javascriptjquerycss