I'm having trouble with an css style applied to an overlay in a package called react-popup. The css style doesn't work properly in production, whereas it works correctly in development.
Basically these two classes seem to be the issue:
.mm-popup {
display: none;
}
.mm-popup--visible {
display: block;
}
In development it works, but in production .mm-popup--visible is always set to display: none;
it looks like it isn't even taking .mm-pop--visible into consideration and just using .mm-popup.
If I try and set it like this
.mm-popup .mm-popup--visible {
display: block;
}
The opposite happens, it works in development but not in production.
Thoughts?
Actually when you are combining classes of same div done leave space, ryt now what u need is .mm-popup.mm-popup--visible without space.. Thing is that your style is searching --visible as child of mm-popup but it's on same level. So you should use without space
I think there is a space between dashes in mm-popup--visible, you have made a typo it seems like mm-popup- -visible
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 created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
When I add bootstrap on my html link it changes some of my css code.
Pre-bootstrap:
After-bootstrap:
Bootstrap link:
Css code changed:
#bannerRodap{
background-color: black;
position: fixed;
width: 100%;
height:80px;
top: 88%;
}
#bannerRodap p{
position: relative;
top: 25%;
color: white;
text-align: center;
font-family: 'Helvetica',sans-serif;
font-size:0.8em;
}
And besides that, bootstrap also added this little blue thing under my flex-box container.
Yes the CSS change you experience is bound to happen, it is one of the typical disadvantages of using Bootstrap. Like the name itself suggests the framework "Bootstrap" makes its complete CSS available to your entire project. Real problem is the immense code the bootstrap.css contains even though the programmer doesn't even need most of it(more than 3000 lines). I have taken a very small snippet from the file(bootstrap.css) to explain:
a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
This means all the anchor tag(<a>) in your project would have the color #337ab7 by default UNLESS you override this style to what you need in your own stylesheet. The real problem arises when you see other elements in your project changing its behaviour according to the bootstrap CSS but you really didn't want them to - In this case you need to override the styles coming from bootstrap.css just say in a way to cancel out the bootstrap styles you need to write your own unnecessary styles to make it look normal.
That's the reason when you ask most of the experienced UI devs about bootstrap they would just go ... ** yuck **
Your own stylesheet starts to get really messy.
HTML gets messy especially when you start using the grid structure of bootstrap
Huge unwanted code(from BS CSS/JS) lies in your project even though you will never ever need all of them.
Even the order of the stylesheets included hardly makes any difference. In your case use the Dev Inspector to see whats causing the blue thing(probably a shadow from boostrap) to appear & remove that by overriding the styles in your own stylesheet(in this case, your stylesheet should be included after the bootstrap.css)
Imo, bootstrap should be used mostly by those who need bootstrap to do everything about the look & feel of their project with very little customisation to do on their own. If you have heavy customisation of your own then might as well write you own CSS from the scratch without including BS.
I use CSS to customize some parts of the layouts in Vaadin. It worked fine until now. I tried to apply a new rule to one of my compoenents but it simply doesn't take effect, it stays how it is. I already have a similar rule which I tried to apply and change it, but the applying itself works, but any change I make to the CSS class doesn't take effect too.
I don't know why, but it seems like that at some point the CSS changes started not to do what they should, they just don't get active. I then tried to change existing rules which work fine, but these changes just don't appear on the webiste.
Is there any known bug or am I just doing something wrong what I have been doing right all the time? I can't help myself anymore, I am stuck with this for a time now.
Here are the CSS classes, as simple as it can be I guess:
.v-slot-slotenabrechnung {
padding-bottom: 21px;
padding-left: 21px;
}
.v-slot-myslot {
padding-bottom: 21px;
padding-left: 21px;
}
myslot is used at the moment and works fine. When I change the padding to 150px for example and rebuild the application and deploy it, nothing happens. And that's why my new class isn't working either. But attaching the myslot-class to a new component works, just not any changes to it.
I can for example change the padding to 100px and then attach it to a new component, but that's results in the 21px it had before...
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.