I need assistance with creating a dynamic div height based on the content length of another div.
For instance, when DIV A contains certain information and DIV B displays feedback related to DIV A. If DIV B has more content than DIV A, I want DIV A to remain a fixed height with a scroll option instead of expanding endlessly.
<div class="A col-md-9">
content
</div>
<div class="B col-md-3">
feedback content
</div>
To achieve this layout, CSS's flex feature can be utilized. More information on how to use flexbox can be found at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In addition, it is recommended to enclose the A col-md-9 elements within a class declaration like this:
<div class="A col-md-9">.parent {
display: flex;
}
.A, .B {
border: 1px solid #ccc;
}<div class="parent">
<div class="A col-md-9">
content<br>More Content<br> And more content...
</div>
<div class="B col-md-9">
feedback content
</div>
</div>To ensure equal heights for both div elements, set the height and apply overflow: auto. Also, add an additional div inside each.
<div class="A col-md-9">
<div>
content
</div>
</div>
<div class="B col-md-3">
<div>
feedback content
</div>
</div>
CSS:
.A {
height: 50px;
overflow: auto;
}
.B {
height: 50px;
overflow: auto;
}
Update: To base B div's height on A div, retrieve A div's height and set it for B div.
const height = document.getElementsByClassName('A')[0].offsetHeight;
document.getElementsByClassName('B')[0].style.height = height + 'px';
No need to specify height in A and B classes after this.
.A, .B {
overflow: auto;
}
Now B div's height adjusts based on A div's content. If B div exceeds, scroll view will appear instead of expanding its height.
This method has proven effective for me.
I have a formview with textboxes, a radio button list, and an edit button arranged in the following order: <asp:textbox id="tb1" runat="server" text='<%# Bind("DATE_1", "{0:d}") %>' /> <asp:calendarextender id="tb1_CalendarExtende ...
To enhance the pagespeed of my website, Pagespeed Insight recommends using deferred images instead of lazy jQuery images. In an effort to follow this advice, I made adjustments based on suggestions from another source. Read more on stackoverflow I utiliz ...
I am currently working on writing an asynchronous test with mocha using the done() call. Here's what I have so far: it('should contain data.', function () { db.put(collection, key, json_payload) .then(function (result) { ...
How can I convert the SphereGeometry() object into a flat plane on the screen? I want it to function in the same way as demonstrated on this website, where the view changes when clicking on the bottom right buttons. Below is the code for creating the sph ...
I am facing a challenge with fetching and parsing an XML file using JavaScript. The XML-file is beyond my control. Recently, there has been a change in the encoding of some XML files which prevents the code from being parsed successfully. Previously it wa ...
Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...
I've been working on a project that involves NodeJS and Mysql for the backend. Everything was going smoothly until I encountered a small issue after adding a SUBQUERY. Below is the Mysql Query: var GetHistoryPayments = function(code){ var qu ...
Is it possible to have an "else" block without an "if" statement in JavaScript? If so, what is the syntax for this situation? if (req.body[data].length <= maxlength[indx]); // <===== semicolon else { req.body[data] = 'ERROR: too lo ...
I'm not very well-versed in javascript/jquery and have been on an extensive search for a solution to my specific problem. While I've come across some close answers, I am struggling to adapt them to fit my own scenario. On my website, I have a fo ...
I need to send latitude and longitude data to search it on Google Maps. The data needs to be retrieved from a database, but I'm struggling to figure out how to do it with just one click. Here is the code snippet: <?php $con = mysqli_connect("loc ...
Operating a proxy server, I send a request to OpenAI which responds with a Readable Stream object. The proxy server then redirects these events back to the client. While my code functions properly on a local deployment, it encounters issues when deployed ...
Seeking a solution to limit the number of posts displayed for each category using a .limit() function, but uncertain on how to proceed. Currently utilizing Mongoose and Express in my code setup. The existing code snippet is outlined below: router.get(&a ...
Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...
I have set up a cascading dropdown list - State -> City -> Pincode . Instead of fetching data from the database, I am using JSON. The dropdown functions smoothly on the local server, but experiences slowness on the web server. Here is a snippet of ...
During the development of my website using Next.js, I have encountered a security concern with the way Amplify stores user sessions. Currently, Amplify saves user tokens in the browser's localStorage, which raises doubts about its security. I am cons ...
The code in the HTML I'm viewing appears as follows: document.querySelectorAll('h4#unique_id ~ h5 ~p +p +h5').forEach(title => console.log(title)) <body> <h4 id="unique_id"> foo bing bar </h4> <p>some te ...
I am seeking guidance on how to handle resource loading errors in ocLazyLoading. I have attempted to load some resources within the resolve section of my $stateProvider. One file, ctrl.js, loads successfully. However, another file, iam-not-there.js, fails ...
I'm currently in the process of building a responsive website with react. I am utilizing CSS stylesheets for styling and have used @media queries to ensure responsiveness. However, I've encountered an issue while testing in Chrome where the elem ...
Having an issue with the success function in my ajax call. It doesn't seem to be working as expected. Check out the code snippet below: var data1 = { "name": namedata[0], "email": namedata[1], "mobile": namedata[2], "company": namedata[3], "message" ...
I have been experimenting with using entypo as the icon source for my web application. The UI technology I am working with is ZK. However, I encountered an issue when trying to include an icon from that font by using: <span sclass="entypoWhite">&am ...