"Troubleshooting a problem with the height of a collapsible div

I am encountering a peculiar problem with the height behavior of a collapsible div. The expanded height of the div persists even after it is closed or collapsed. Please see the image below for reference:

https://i.sstatic.net/OetPL.jpg

The JavaScript seems to be adding the height to the list item on click. Here is a snippet of the inspect element:

<ul id="og-grid" class="og-grid">
            <li><a target="_blank" href="www.somewebsite.com" data- 
  largesrc="uploadimage/project/sfs.jpg" data-title="Website Redesign of " 
  data-type="WebSite" data-description="Website Redesign "><img 
  src="uploadimage/project/thumb/sfs.jpg" alt="img00"></a></li>

  <li style="**transition: height 350ms ease 0s; height: 719px;**" 
  class="">
  <a href="#/" data-largesrc="uploadimage/project/notouch.jpg" data- 
  title="No Touch" data-type="Mobile Application" data-description="Notouch 
  is a simple but useful app that helps you to lock the screen temporarily 
  to prevent unauthorized clicks or to go to other apps from the current 
  screen. This is especially useful when you give your Phone to kids to view 
  videos or YouTube. This app will disable the touch facility temporarily."> 
  <img src="uploadimage/project/thumb/notouch.jpg" alt="img01"></a></li>

  <li><a target="_blank" href="www.fhjgh.com" data- 
  largesrc="uploadimage/project/2capture.jpg" data-title="Test" data- 
  type="WebSite" data-description="hI there njwehkasd kahffhsaf sdkfhsdf 
  saklhflkdshf sdhfksdhf kldsh"><img 
  src="uploadimage/project/thumb/2capture.jpg" alt="img02"></a></li>

  <li><a target="_blank" href="http://www.jhghjghjg.in" data- 
  largesrc="uploadimage/project/green.jpg" data-title="Green Homes" data- 
  type="WebSite" data-description=", due to better usage of pictures"><img 
  src="uploadimage/project/thumb/green.jpg" alt="img03"></a></li>

  <li><a href="#/" data-largesrc="uploadimage/project/leonardo.jpg" data- 
  title="Leonardo" data-type="Logo Design" data-description="The Logo design 
  . We have used the negative space design concept here to make the L hidden 
  inside a box ( Box represent a furniture)"><img 
  src="uploadimage/project/thumb/leonardo.jpg" alt="img04"></a></li>

</ul>

Here is the relevant JavaScript code:

...

Any guidance on how to resolve this issue would be greatly appreciated. Is there a CSS or JavaScript solution available?

javascripthtmlcssheight

Answer №1

For resolving the issue of incorrect height after an animation, try executing a javascript command at the end of the animation to remove the container that held the open image or empty it. If the height continues to be incorrect even after trying these commands, it may be due to preexisting width/height attributes on the container that need to be removed by changing their value to ''.

Edit:

close: function () {
    ....
    setTimeout($.proxy(function () {            
        document.getElementsByClassName('og-expander')[0].parentElement.removeAttribute("style");
        if (typeof this.$largeImg !== 'undefined') {
    ....

This solution has been tested by me and verified to work successfully.

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

Fullcalendar feature that restricts users from selecting multiple days for an event

I am using the fullcalendar plugin from http://fullcalendar.io/ and I want to restrict users from creating events spanning multiple days. $('#calendar').fullCalendar({ defaultView: 'agendaWeek', lang: "fr", header: ...

javascriptjqueryfullcalendar

Send an email containing the entirety of a web page

After selecting a user from a drop-down and running a search, a PHP page displays a time schedule in HTML table format. Now, the goal is to send the entire page to the user via email when a specific button is clicked. The user's email address is sto ...

phphtmlmysqlemail

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

javascripthtmljsonweb

How can I transition smoothly between two colors in three.js?

I am working with a three.js object that is currently a specific color and I would like to smoothly animate it to a different color. I want the animation to only display a direct transition between the initial and final colors without following a linear pa ...

javascriptanimationthree.jstweencolor-blending

Feeling trapped by the endless stream of AJAX calls

As I was working on building a scheduler with jQuery and AJAX, I encountered a problem with multiple AJAX requests. Although most of the time everything works fine and returns the correct values, occasionally, out of more than 50 requests, I come across so ...

javascriptphpjqueryajax

A guide to sharing session variables with express views

Struggling to access session variables in EJS views and encountering various challenges. To locally access req.session, I've implemented middleware as outlined in this guide on accessing Express.js req or session from Jade template. var express = re ...

javascriptnode.jsexpressexpress-session

Using track by in ng-repeat function triggers an endless $digest-loop issue

It appears that I am still struggling to grasp the mechanism behind ng-repeat, $$hashKeys, and track by. Currently, in my project, I am working with AngularJS 1.6. The Issue: I have an array of complex objects that I want to display as a list in my view ...

javascriptangularjsangularjs-ng-repeat

An absence of data causes the function to malfunction

One of the components in my application is responsible for rendering select elements on the screen, allowing users to dynamically order data. The initial state is as follows: state = { sortBy: [ { author: 'asc' } ] }; In this s ...

javascriptreactjs

`Encountering an unknown index while using AJAX to retrieve data from a PHP file

When using AJax to call a PHP file and retrieve values, I encountered an issue where the called PHP file returns an unidentified variable upon submission. Here is the script being used: <script> function showPrice(str) { if (str == "") { ...

javascriptphpajax

Having trouble with Bing search API not functioning properly with AJAX?

Looking to incorporate Bing's search API using JavaScript. My goal is to allow the user to input a query and retrieve only images from Bing. I attempted to use Ajax for this task. When entering the URL directly in the browser, I successfully retriev ...

javascriptajaxbingxmlhttprequest

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

Tips for adjusting a web address provided by a user

I have a JavaScript code that prompts the user to input a URL and then appends it to a div. The code is working fine, but now I am trying to add functionality to edit the entered URL by changing the width and height of any iframes before appending them. ...

javascripthtml

Initializing the $(this) variable prior to the function declaration

I am faced with the task of performing multiple checks based on the IDs of certain elements, all of which vary slightly. So, I created several functions to handle this, and rather than repeatedly using $(this).children ..., I wanted to create a short vari ...

javascriptjqueryhtmlvariablesglobal-variables

What are the steps for editing and preserving a logo with an 8-bit indexed color palette?

After purchasing a RE/MAX franchise, I now need to make edits to the official logo found on remax.com using Adobe Photoshop. However, I have encountered a problem when trying to edit their logo in Photoshop. When I open their PNG logo, the layer appears d ...

cssimagepngphotoshop8-bit

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

What emerging patterns can be observed in the security of client-side coding within the realm of web development

Keeping up with the constant flow of new frameworks and technologies can be overwhelming. One area that particularly interests me is client-side frameworks, such as AngularJS, Backbone, Knockout, jsviews, knockback, SPA... These are currently among the mos ...

javascriptnode.jsangularjsbackbone.js

What methods are available to verify all my (JavaScript) AJAX calls when they are being sent to Node.js?

My web app sends hundreds of HTTP requests to a Node.js API I created. I need to ensure that only authenticated requests are accepted by Node.js. The issue at hand: I don't want to manually update each AJAX request in my JavaScript code to include a ...

javascriptjquerynode.jsajaxhttp

Issue with Component not displaying properly upon refreshing

I'm currently using react.js and I have a button with an onClick event. My goal is to reload the page after clicking the button and then display a specific component on the page. However, I've encountered an issue where the component doesn't ...

javascriptreactjsjsx

The Register Page is failing to load

I'm currently tackling a validation form project with NodeJS. However, I'm encountering an issue where register.ejs is refusing to render. Despite my attempts to tweak the paths and navigate through different folders, the problem persists. As a n ...

javascriptnode.jsexpress

Tips for boosting ViteJs development mode performance

One issue I am facing is the slow server performance during development mode. After starting the server and opening the page in my browser, I have to wait 3–6 minutes for it to load! Initially, ViteJs downloads a small amount of resources, but then the ...

javascripttypescriptvue.jsvuejs3vite