0

So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.

The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:

display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;

When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.

Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?

I have my scss with this overlay-content styling:

.overlay-content {
    /* this may or may not be here */
    /* visibility: hidden; */

    @include flex();
    @include flex-direction(column);
    @include flex-justify-content(flex-start);
}

And I'd have a code which triggers when I want to display my popup:

        $('.overlay-content').css('visibility: visible;');
        $('.overlay-bg').css('visibility: visible;');

Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?

What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
ditoslav
  • 4,563
  • 10
  • 47
  • 79
  • 1
    Questions seeking code help must include tthe shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Aug 18 '15 at 07:56
  • I've edited in hopes of better clarification – ditoslav Aug 18 '15 at 08:12
  • 1
    http://codepen.io/snuuve/pen/LVodrm It's working as it's should. Also read this about `Display` vs `VIsibility` http://stackoverflow.com/questions/3475119/css-properties-display-vs-visibility . – Skodsgn Aug 18 '15 at 08:51
  • 1
    Indeed `.hide` seesm to work just fine. If you show us the implemenation where it *doesn't* work (in a suitable demo). we can see what might be causing the issue. – Paulie_D Aug 18 '15 at 11:47

1 Answers1

1

I've run into the same issue and solution I came up with may not be the most elegant but it does the job.

I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.

Alex Pashkov
  • 178
  • 1
  • 10