Leaving space to element even with display:none

Question

Just a simple question: I have a notification message that can be visible or invisible in a webpage (with jQuery show() or hide()), always in the same place. The problem I am facing is when it appears, it drags down all the contents below it, just it height.

How can I smartly deal with this situation to leave a (blank or not) area so the UI does not change its height when this component disappears/appears?

score 5 · Accepted Answer · answered Jul 13 '18 at 15:23

5

Instead of using show() and hide(), you can just add css property opacity:0 and opacity:1 with jquery. This would leave a blank space even the element is not shown.

answered Jul 13 '18 at 15:23

Aryan Twanju

2,464
1
9
12

1

Something like this: `$("yourselectorhere")[0].style.opacity = 0;` Or set it to 1 – reZach Jul 13 '18 at 15:28
Thanks! Finally used https://api.jquery.com/fadeTo/ function to make it shorter. – andcl Jul 13 '18 at 17:13

score 0 · Answer 2 · answered Jul 13 '18 at 15:31

0

You can use css property visibility: hidden; and visibility: visible;. This would leave a blank space and UI does not change its height.

answered Jul 13 '18 at 15:31

Girisha C

1,922
1
12
20

Leaving space to element even with display:none

2 Answers2