My website has a two-column layout with a sidebar and content section that are both set to equal height when the window loads and resizes. The page is designed to be responsive.
To dynamically arrange blocks within the content area, I am utilizing a jQuery plugin called mixitup. You can find more information about this plugin here.
The challenge I am facing is adjusting the height of the sidebar when the number of blocks changes and causes the content area to also change in height.
Previously, I experimented with using Javascript to adjust sizes like you're looking to do. However, I found it to be an ineffective solution.
If you contain both the sidebar and content within a wrapper, you can achieve this effortlessly. I suggest utilizing flexbox for this. Your code could resemble the following:
HTML:
<div class='wrapper'>
<div class='sidebar'>
</div>
<div class='content'>
</div>
</div>
CSS:
.wrapper {
display: flex;
}
.sidebar {
flex: 1;
}
.content {
flex: 3;
}
For more information on flexbox, check out this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox has good support nowadays and can efficiently maintain consistent sizes.
If you're looking for a solution that works across browsers and even with older ones, CSS alone might not be the answer. However, with a small JavaScript function, you can achieve the desired result by setting all elements to the height of the tallest one.
function setEqualHeight($elements) {
var tallest = 0;
$elements.height('auto');
$elements.each(function() {
var $this = $(this);
if ($this.height() > tallest) {
tallest = $this.height();
}
});
$elements.height(tallest);
}
Simply trigger this function on page load and whenever the page is resized. It's also a good idea to consider a responsive design for mobile where the height can be set to auto.
I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...
My Ajax form needs to be submitted as soon as the user selects an image, but I'm encountering an issue with the form not submitting. Any guidance on resolving this problem would be greatly appreciated. -- Below is the form --- <form id="bgimagefo ...
I am currently working on a solution to keep the header of my table fixed in place without scrolling. Despite my limited experience with Bootstrap and React, I have tried exploring older threads on Stack Overflow to find a suitable fix for making the head ...
I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...
I've been experimenting with typeahead.js and utilizing the BloodHound remote feature to load data. Everything is functioning properly, except that when I input only spaces in the textbox, typeahead still makes an ajax call. I'm wondering if th ...
I'm having trouble implementing a copy button on my HTML page. Despite no errors showing in the chrome console, the text just won't copy. Below is a snippet of my HTML code: <!doctype html> <div class="ipDiv tk-saffran"> <div c ...
I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...
Currently, I am utilizing QUnit, Sinon.js (specifically fakeServer), and jQuery (for AJAX) to capture and test AJAX calls within my program. One issue that I am encountering pertains to the inconsistency where inline-function calls are not being executed. ...
Is there an effective method for storing values entered into the text fields on this page? const AddUserPage = () => ( <div> <PermanentDrawerLeft></PermanentDrawerLeft> <div className='main-content'> < ...
Is there a way to refresh a top bar similar to Facebook, where the number of messages updates without refreshing the entire page? I know how to do this if the top bar is separate from the main page using meta tags, set timeout, or a refresh tag. However, ...
Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...
Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...
Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...
I am still learning jquery and while I may not fully understand it yet, I have managed to create the following code. However, I am facing an issue where the field for IGV dollar does not display two decimal places. For example, when I enter 1200, it gives ...
The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...
When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...
I'm currently working on a functionality where a unique number is automatically generated whenever a new record is created. For instance, if I were to click "Create record" on a webpage, the number would auto-fill in the record ID field. Subsequently, ...
On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...
I am currently working on a login page that includes a multipart/formdata enctype form with input fields for users to input data in any language. I am utilizing ajax (FormData) to send this data to the server, however, I am encountering issues with data co ...
I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...