Weird HTML issues when changing the visibility of a div in JS

HTML-CSS
1

Here is my pen: https://codepen.io/Mike-was-here123/pen/MLLprL?editors=1010

It is supposed to calculate every possible combination of a string you put in and output it for you. Currently, none of the fields are set up and a default “1234” string is being used with 4 characters per combination and no repeats.

When you load up the page the user should see this:

image
image1920×1040 75.3 KB

After hitting the calculate button their should a new section for the process:

image
image1920×1040 91.5 KB

However, that is not what is happening. Instead, when the user hits calculate this happens:

image
image1920×1040 80.1 KB

My issue is, how do i fix this? Here is how it works to help figure it out.

On CSS line 105 I hide 2 divs that make up the process. This is why when you first load up the page it is hidden. Here you have the HTML code and the appropriate CSS code that hides it:

image
image1920×1040 81.9 KB

When the user hits the calculate button, it runs the JS starting on line 82. On line 85 i load the .inputCheckDiv by changing the CSS code to visible so i can display a error code if the user’s inputs are impossible for the program to run. Then, the program will return and not continue to load more HTML.

The set parameters i am currently doing for testing will not provide a error code, and will load the div with “Input Test Passed” as seen on line 94.

image
image823×292 18.2 KB

If the Input passes, I then load .passedDiv on line 95. This container encompasses the rest of the HTML for the process section. On lines 96 - 108 you will see how i go in and edit the HTML content of each of the white boxes using functions i made on line 80 and below. Then on lines 109 - 112 I reset variables.

image
image866×469 27.8 KB

Basically, lines 85 - 95 are the only lines of code causing this issue.

Sorry if i wrote too much, but i am wondering why the HTML comes up messed up? The container div that surrounds the entire thing is .main on CSS line 5. The height does not adjust, and the process section will get squeezed on top of each other.

2

If I understand correctly your issue is the “Process” div getting out of it’s container? It’s because .inputCheckDiv, .passedDiv has height: 0.

3

That is my issue. Even trying to change the height to relative has no affect.

4

Easy peasy.

On your .main CSS, add

overflow: auto;
5

image
image1920×1040 87.7 KB

That still causes a mess when it comes to the elements being on top of each other.

Also, before i even hit calculate, their is still a massive scrollbar empty space beneath the calculator. I want to hide everything until i need to make it appear again later in the JS after the users hits calculate.

6

@michaelnicol

Instead of using visibility:hidden and height:0

I recommend using display:none; for removing items from being displayed.

Visibility doesn’t remove the object from taking up space where it normally would have rendered. Display:none; completely removes it from the flow of the render, which minimizes the disruption to your layout.

Bonus info:
In fact jQuery, a very popular js library, toggles the display:none; property when you use hide() and show() and toggle() functions. I would include a link to their documentation but I guess I don’t have enough street cred on FCC to post links in the forums yet. haha.

I would toggle between display:none; and display:block; in your case.
But in other cases you might toggle between display:none; and display:inline-block; or any other display property that you’re using.

Good luck!

7

Previous poster already gave you the solution. I just wanted to point out that you can’t come up with your own CSS attributes - height can’t have value relative (docs).

Spoiler: https://codepen.io/jenovs/pen/VRamwL

8

@Jaketh @jenovs

Both of your solutions worked! Thank you.

I will be using Jaketh’s because i never knew jQuery had those features and it is something new for me.

I thought relative was a attribute of height?

9

Relative is an attribute of position