Difficulty Achieving Equal Height in Two Columns

Looking to integrate a video player and chatroom. When setting the width to 100%, the chatroom appears much smaller than desired, about a quarter of the size. I would like the chatroom to match the exact height of the 16x9 player.

I attempted to use the matchHeight jQuery plugin but could not achieve the desired result, and no errors were reported in the console.

Thank you for taking a look.

<body>
    <?php include_once("../../files/bootstrap-header.php"); ?>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 text-center"></div>
            <div class="col-xs-12 col-sm-9">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe allowfullscreen class="embed-responsive-item" frameborder="0" height="100%" scrolling="no" src="http://player.twitch.tv/?channel=agentcodydanks69" width="100%"></iframe>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12">
                <div class="hidden-md">
                    <iframe width="100%" height="100%" src="https://www.twitch.tv/embed/runitup/chat" frameborder="0" allowfullscreen></iframe> 
                </div>
            </div>
        </div>
    </div>
csshtmlbootstrap-4

Answer №1

Did you check each element for padding? Adjusting the row height to match the smallest element might solve the issue.

Answer №2

To achieve equal height for elements, it is recommended to utilize the power of CSS flexbox

.equal--height {
  display: flex;
}

.iframe {
  background: red;
}
<div class="equal--height">
  <div class="iframe">
    <p>Ensuring uniform height</p>
  </div>
  <div class="iframe">
    <p>Ensuring uniform height</p>
    <p>Even with varying text length</p>
  </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

Create a duplicate of a div element, including all of its nested elements and associated events, using

Attempting to duplicate a div containing input fields but the event listeners are not functioning. Despite performing a deep copy in the following manner - let rows = document.querySelectorAll('.row'); let dupNode = rows[0].cloneNode(true); sh ...

javascripthtmlcss

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...

cssheightcss-transitions

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

What is the best way to place a popover above a selected text section?

Imagine a situation where a body of text is present. When a word is highlighted within this text, a popover should appear with a tooltip positioned directly at the highlighted word. Think of it as similar to how a Mac displays definitions of words within ...

javascriptjquerycssangularjsangular-ui

Utilize the Static Path in Django with Template Filters

To easily version my css file using a simple template variable, I update the version in my settings and it automatically applies to all files. Here's how I accomplish this: Template Filter @register.filter def settings_value(name): return getatt ...

cssdjango

Learn the method for toggling images in HTML while simultaneously storing a 0 or 1 in a flag variable

In my design, I would like to have a star icon that displays two star icons at once - one blank and the other yellow. These stars will swap their appearance when clicked or tapped on touch screen devices. Additionally, I want to be able to store values as ...

html

Utilize Angular to transform a JSON string into HTML text featuring organized bullet points

I am currently working on a project using Angular and I need to display some data from a JSON file on a webpage. The issue I am facing is that the message is quite lengthy, and I would like it to be presented in bulleted points. "messageToDisplay" ...

htmljsonangular

Retrieve the values by accessing an element upon clicking the "Submit" button

Here is an interesting example that I found on this website I am currently working on a simple webpage to display both the current forecast and extended forecast. This is my Index.html: <!DOCTYPE html> <!-- To change this license header, choose ...

javascriptjqueryhtmlangularjsapi

What is the best way to choose content that has been clicked on?

How do I display only clicked content? Currently, I have a system where clicking a button shows the data in the nav tag. The code is written in views.py. class TopView(TemplateView): model = Data template_name = 'index.html' def get ...

pythonjqueryhtmldjango

Identify changes in attributes on elements that are updated automatically

On my webpage, I want to have two select boxes that are connected so their values always match. Here's an example: Imagine a page with two selects: <select class="myselector"> <option value='1'>1 <br> < ...

javascriptjqueryhtml

What are some ways to customize the appearance of VueJS components?

I am new to Vue, so I apologize if this question seems silly or if I have overlooked something. I believed that you could target a custom element like this: my-element { styles go here} However, when I created an element, it appears that I can only targe ...

cssvue.js

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. https://i.sstatic.net/pGxzt.png I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: { ...

pythonhtmlcssselenium

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

htmljquerycss

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Seeking advice on how to incorporate more images and hyperlinks within a panoramic viewer, similar to the examples below: This particular link Panorado js viewer. I have noticed that these viewers feature embedded hyperlinks and overlays, I have attempt ...

javascripthtmlthree.jswebglpanoramas

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Issues arise when setting a delay for CSS transitions to occur due to the

I'm trying to create a scroll bar that only appears when hovered over, similar to how it works on Facebook where the scroll bar shows up slowly instead of all at once. I've tried using CSS transition delay, but it doesn't seem to be working ...

htmlcss

How can I customize the color of the Title Component in Ant Design using Styled Components?

I am currently integrating Ant Design with styled components in my project. One of the components in my application is a NavBar that includes an H1 Component. H1.tsx import React from 'react'; import { Typography } from 'antd'; impor ...

cssreactjsantdstyled-components

Mysterious failure of JavaScript regular expression when encountering the term "tennis"

We developed a JavaScript script to detect duplicates or potential duplicates, but it seems to have some issues with certain words like "tennis." The script functions correctly in most cases, but fails when analyzing phrases related to the word "tennis" fo ...

javascriptjqueryhtmlregex

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

triggering php object on mouse hover

I'm currently working on creating a mouseover effect for my PHP elements within a store. My goal is to have a transparent div appear over the dynamically generated PHP sections. I have set it to display block mode to test its functionality and positio ...

phpcssonmouseover