CODEWITHSUNDEEP
javascripthtmlcssdombootstrap-4
coderdude
coderdude

Reputation: 13

Whitespace in webpage even after using display:hidden to hide objects

Here is my code in JsFiddle (so you can also see the code in action) - https://jsfiddle.net/2yvjm4h1/

Despite using display:none; to hide my objects instead of visibility:hidden to hide my form objects (before conditionally displaying them with javascript), there is still a ton of whitespace between the textarea element and the first file upload element. Once the user clicks the buttons to add all 10 file upload elements on the screen, the white space will be gone. But I want the white space to always be gone, and the page size to dynamically increase.

How do I eliminate white space from the start?

Upvotes: 1

Views: 156

Answers (1)

Daniel Reynolds
Daniel Reynolds

Reputation: 142

It looks like you have a br after every div. Try either removing them or putting them inside the divs that have display:hidden. See my jsfiddle fork.

EDIT: if you are planning to unhide the divs, they won't have any breaks. To fix that, put the line breaks inside the divs.

Upvotes: 1

Related Questions