Combine - display inline-block and none?

Question

div#errors_of_saved{
    width: 100px;
    display: inline-block;
    display: none;}

There is error div, which is hidden until some JS function doesn't fade it in, and also it should be displayed inline.

The problem - this way text editor says that display property is overwritten, and display: inline-block none; - that syntax is invalid.

I don't want to use visibilty:hidden because Jquery animation fadeIn() fadeOut() doesn't work with visibility.

What can I do?

Do you want a jQuery solution that specifically illustrates how to use `fadeIn()` and `fadeOut()`? — Marc Audet, Jun 01 '13 at 22:07

score 0 · Answer 1 · answered Jun 01 '13 at 22:04

Because div#errors_of_saved is displayed on demand to show error messages, I would set the default to display: none.

jQuery tends to use display: block to show an element. Since you want to use display: inline-block, I might try setting a more specific CSS rule, for example:

div#errors_of_saved.show {
    display: inline-block
}

and then have jQuery add the class as needed to show the error message.

My suggestion assumes that you might use the jQuery animate() function, but there are several approaches one could try.

Combine - display inline-block and none?

1 Answers1