0

I have a requirement of keeping a div hidden and make it visible when user performs an action.

But, due to dependencies on an external script, I cannot use style="display:none" for my div.

Therefore, to meet the requirement, I am thinking of using style="visibility:hidden,height:0" for my div and when user performs an action, make it visible using jquery by changing the style to "visibility:visible,height:auto" which I have tested and working fine.

Is there any issue with the approach I have used when using in computers and mobiles? Whether any browser prevent content on a div which has height 0?

I have seen some posts in this forum suggesting to use of "position:absolute" along with height changes to meet this objective. So, is it needed to change the div to absolute or my approach of changing the visibility and height is fine?

6
  • 2
    have you tried to use "display: none !important" ?
    – Alexandre Nicolas
    Commented Feb 23, 2017 at 14:19
  • 3
    Why in particular can you not use display: none? Are you able to toggle a CSS class instead of using inline styles?
    – Sean
    Commented Feb 23, 2017 at 14:20
  • I cannot use display: none because I use mathjax library to load mathematics. this library needs the width and height of the container to load properly and when it comes to divs with display:none, it attach the content to body, process it and load it back to the original div. see peterkrautzberger.org/0165
    – Kiran
    Commented Feb 23, 2017 at 14:21
  • 2
    If, for some weird reason, you can't use display:none, you could move the element outside of the visible range (like far negative top and absolute position)
    – GôTô
    Commented Feb 23, 2017 at 14:22
  • You have answer over here
    – Vilas Kumkar
    Commented Feb 23, 2017 at 14:24

2 Answers 2

Reset to default
2

You could move your element outside the visible range by adding a CSS class:

.custom-hidden {
    position: absolute;
    top: -5000px; //use !important if needed
}
1
  • yes, it is fine. but, i was trying to understand whether any issue is there with my approach suggested
    – Kiran
    Commented Feb 23, 2017 at 14:24
0

You solution is suitable, else you can still try

1) opacity: 0;

2) position: absolute;
   left: -9000px;

3) transform: scale(0)

Not the answer you're looking for? Browse other questions tagged or ask your own question.