This question already has answers here:
How to fade to display: inline-block
(6 answers)
Closed 9 years ago.
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?
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.
Related
I've just begun making some simple changes to a Wordpress site. I would like for the bottom padding of arrows within a toggle element to be larger so that the text will respect a"margin".
I have copied the selectors by inspecting the element, but there is nothing happening when I actually paste it in my WordPress and save it. ¿Could you help me know which is the correct selector for the triangles?
I though it was this:
#elementor-tab-title-4601 .elementor-toggle-icon-opened .i {
padding-bottom: 10px;
}
The page is: https://dayston.com.mx/areas-de-practica/
Try adding display: flex to that parent container that houses the text and arrow like this:
.elementor-tab-title {
display: flex;
}
And here's the screenshot:
If you like to learn more about FlexBox, try using this site : https://flexboxfroggy.com/
I'm using slideout.js for a mobile nav and upon each page load, the menu flashes on the screen for a moment and disappears until the hamburger button is toggled. This doesn't happen if I set the div containing the nav to display: none, but of course when I open the menu, none of the links are displayed.
My question is, using Sass, can I create a conditional that performs the following logic on two separate classes:
if .slideout-menu is not set to display: block
then
.mobile-nav should be set to display: none;
CSS can't react to changes that happen on a page without JS help besides from pseudo-classes, so unfortunately you can't target it that way. slideout.js adds classes to style different states of the slide-out menu so try targeting those.
Try something like this:
.slideout-menu .mobile-nav {
display: none;
}
.slideout-open .slideout-menu .mobile-nav {
display: block; // or whichever display property you need
}
Going off of the CSS states in index.css from https://slideout.js.org/
I want to use flexbox for an app, and want all elements to be set do display: flex. Is that possible? if yes, how? I have alread set body { display: flex }, but it still does not apply to all body elements.
(I took my comments and turned them into an answer)
The universal selector would do the trick:
body * { display: flex; }
(Note that I've scoped it to only include elements within the body)
The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues, but it's by far the simplest way of doing what you asked (given that the display property isn't inherited). The other option (a selector consisting of a massive list of all HTML) elements would take quite a long time to download and parse, too! As for best practise, I don't think either of them is a particularly awesome idea, but I don't know the details of your implementation.
The display property isn't inherited because it would wreak havoc! For example, the <a> element is an inline element. If it inherited display: block; from it's parent elements, all links would be full width and cause a line break (like a p, h1 or div). The inheritance bit of the (rather complicated) CSS2 spec is here: http://w3.org/TR/CSS2/cascade.html#inheritance
body { display: flex; } it will not work because it means apply flex to body.
instead
{display: flex;} it means apply flex to all element(selectors) in page. however I faced issue if using live server because it will apply flex to element also which is automatically applied to code editor(mine is vs code).
you can use this method
anyelement,.anyclass,#anyelement {display:flex;} adding comma after selectors means apply flex to all element which is written.
Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}
I have inserted content using the :before pseudo-element for a class. I was trying to position this content using margin-top but firefox is simply ignoring the property. The code follows:
.bef {
line-height: 2em;
white-space: nowrap;
font-size:24px;
display: block;
}
.bef:before {
display: block;
margin-top:2em;
padding: 0;
color: #666666;
content:"Hello";
}
Does anybody know why Firefox may be ignoring the margin-top property?
EDIT: Although margin-top is being totally ignored, margin-bottom:-Xem is working and I am able to move the :before element around
It appears that Darko Z is right.
http://jquery.nodnod.net/cases/577
Hypothetically, the first two test cases (separated by <hr>) should render identically, which they do in Gecko (via FF3.5/Mac), but Webkit (via Safari4/Mac) renders the :before and :after segments as inline. The third test case seems to imply that Webkit currently requires the triggering element to be block in order for the generated content to be block.
The spec isn't clear on what the correct behavior is. It may be worth raising a question on www-style to see which rendering engine's behavior is correct, then filing a bug with the incorrect rendering engine to get it fixed in future versions. Feel free to use my code as a test case.
try making .bef display block also? just a guess that the containing element of the :before needs to be block so it can listen to the margin-top...