modify div heights according to screen resolutions and quantity of elements

I have a specific requirement where I want to display 3 panels (Chats, Groups, Channels) in the left panel. The challenge is to adjust their heights dynamically based on both the screen resolutions and the content within each panel.

To achieve this, I will be making API calls to retrieve items for each panel and then using angular bindings to render them.

You can check out the prepared JSFiddle here for better clarity. In the JSFiddle, additional media queries have been implemented to adjust the max-heights based on different resolutions.

My main requirements are as follows:

  1. If all three panels have no items at all, they should collapse - functionality that is already in place.
  2. If any of the 3 panels contain more items than can fit, a scroll should appear - which is also working correctly.
  3. If only one panel has items, it should automatically expand to fit the size.
  4. If there are only a few items in two panels but many in the third, it should display like shown in the image here.

I initially thought about using jQuery after the API calls to manipulate the items count and handle the resizing accordingly. However, this approach seems challenging due to the need to consider both resolutions and item counts across all panels. Are there any CSS solutions available for achieving this complex layout? Alternatively, could you recommend any articles or resources I can refer to for guidance? Is jQuery the only viable option for solving this issue?

javascriptjqueryhtmlcssangularjs

Answer №1

To achieve a uniform height of 33.33333vh, consider standardizing it and then adjusting it with jQuery afterwards. Depending on the number of variations you need to account for, this process may become slightly complicated, but using this unit will handle differences in resolution and is compatible with modern browsers.

Using jQuery, you can calculate the percentage of items in each panel in relation to the total and assign an appropriate vh height to each panel - as shown below:

$(function() {
  var totalNumItems = $('.panel div').length;
  $('.panel').each(function() {
    setPanelHeight($(this));
  });

  function setPanelHeight(panel) {
    var numItems = panel.find('div').length,
    heightPercentage = (numItems / totalNumItems) * 100;
    /* Subtracting 1.5em accounts for label height */
    panel.css('height', 'calc(' + heightPercentage + 'vh - 1.5em)');
    panel.niceScroll();
  }
});

If a panel contains no items, its calculated vh value would be 0, resulting in collapse.

Edit: For demonstration purposes, refer to this jsfiddle link: https://jsfiddle.net/mattBBP/8vvcub3c/ Please note that due to display area constraints, adjustments may be needed outside the scope of the fiddle example.

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

Top method for uploading outside materials

My website is running smoothly with fast load speeds on a one-page layout, but I want to ensure it stays that way by preventing slow loading times. Right now, I have a portfolio page with tiles that pop up an overlay and slider when clicked. The current m ...

jqueryhtmlload

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

javascripthtmlvideo

Problem with sliding image to the left

Is there a way to slide my image to the left when I click on the right arrow of the image slider? The current behavior is that the current image hides and the next image shows up, but without any sliding animation. $('#image-content img:first' ...

javascriptjqueryhtmlcssslide

Looping through values in VueJS from 100 to 0

I am currently working on creating a power meter that will smoothly transition from 100 to 0 and back again to 100. The idea is for the user to press a button, causing the meter to stop at a random value. I just need some assistance in getting the loop fu ...

javascriptvue.js

Randomly position a div within a grid

I am currently working on creating a grid that spans 100% of the width of the browser window. Firstly, I am unsure about how to approach this grid creation, and secondly, I would like to have a div randomly positioned within the grid, filling the space onl ...

phpjavascriptjqueryhtmlcss

Tips for passing a string parameter to a WebMethod in a web service using JQuery

Exploring a webmethod in a local web service (.asmx) for a sample project: [WebMethod] public List<test1> GetLstB(string s) { test1 t; List<test1> lstB = new List<test1>(); t = new test1() { ...

c#jqueryasp.netweb-services

"Utilizing the usePrevious hook in React: A step-by-step

After referencing the React documentation, it seems like I may not be using this code correctly. import { useEffect, useRef } from 'react'; export default function usePreviousState(state) { const ref = useRef(); useEffect(() => { ref ...

javascriptreactjs

What is the best way to incorporate server-side rendered content from a CMS to hydrate Vue.js?

Consider this scenario: content is managed through a traditional CMS such as Joomla or Drupal content is provided by the CMS as fully rendered HTML and CSS In the Frontend React.js should be utilized for all UI interactions. Despite going over most of R ...

javascripthtmlnode.jsvue.jsvuejs2

Identifying all Images with JavaScript, Including Asynchronous Ones

Is it possible to use JavaScript to identify all images within a document, even those that are loaded asynchronously (possibly after the DOM is fully loaded)? I am interested in developing a function that can determine if Google Analytics has been loaded ...

javascriptdomimageasynchronousgoogle-analytics

Is there a way in Vue.js to create a description list (dl) using v-for?

The v-for directive in vue is truly remarkable. I am currently faced with a situation where I need to create a description list similar to this. To achieve this, I have to generate two DOM elements for each item in my array: <dl class="row"> < ...

javascriptvue.jsv-for

Trouble encountered during AJAX form submission

To ensure the form is submitted via an ajax call and to intercept the result in order to update the page without leaving the index page, follow these steps: I am facing challenges getting the ajax call to work properly. <form action="/cart" me ...

javascriptjqueryajax

Error in Mongodb: Unable to convert value into ObjectId

Currently, I am attempting to retrieve only the posts belonging to users using the following code snippet: router.get("/:username", async (req, res) => { try { const user = await User.findOne({ username: req.params.username }); const ...

javascriptreactjsmongodbmongoose

Activate the jquery floatlabels plugin when the input is loaded

I'm currently experimenting with the jquery floatlabels plugin to implement inline labels for input fields in a form. The plugin works perfectly for fields without any text, but I need the label to display even if there is default text present. Upon ...

javascriptjqueryjquery-plugins

Detecting coordinates (x, y) on a canvas

I'm currently working on a mini-game and encountering an issue with the player movement around the green square. My character seems to be unable to move past the x, y coordinates of the square, even though it can approach it closely. I would really ap ...

javascripthtml

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

javascriptjquerycssapachecookies

How can we use the useState hook in React to dynamically generate state variables?

I'm currently working on a React app where input fields need to be stored in the state. While I can use the useState hook to easily store these values, the challenge I'm facing is that I don't know what fields are needed since they are retri ...

javascriptreactjsreact-hooksnext.js

jQuery enables the prevention of form submission when the Enter key is pressed, while still allowing form submission when a

I have successfully created a form that allows me to enter a number into an input text box and press ENTER, triggering jQuery to append the value to a textarea. Everything is functioning as expected. However, I encountered a problem when trying to add a s ...

jqueryformssubmitform-submitkeypress

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...

javascriptjqueryhtmlcss

Unsubscribing from a service method in Javascript using RxJS

After clicking a button, a function is triggered to execute. The function includes an method called "executeAction" that retrieves the current view and then passes it as a parameter to another view for future reference. async executeAction(action: ...

javascriptangularrxjs

Is the Bootstrap code in contact_me.php verifying if the checkbox has been selected?

I need assistance with integrating a checkbox into my basic contact form. I want the validation to ensure that the checkbox is checked before allowing the form to be submitted. Any help on this matter would be greatly appreciated. FORM: <script src="h ...

javascriptvalidationcheckboxbootstrap-4