Never had this problem before but it's come up today and I don't know how to deal with it.
I have an external script which loads it's own css rules (after the initial page styles are loaded).
One of the properties is setting a position for left :
.rule {
left: 450px;
}
I need to over-ride this on my page, which I know I can do by setting a new value and adding !important :
.rule {
left: 0!important;
}
But what I really need to do is change the rule, removing left completely :
.rule {
right: 10%;
}
Using the above rules together....
.rule {
left: 0!important;
right: 10%
}
Won't work as left is now being set to position 0.
Is there anyway I can completely remove the existing left rule without access to the css file that is serving it?
Related
I want to display a toast on the top-middle of screen when image is zoomed-in and other normal toasts to be displayed at default position. I've managed to show toasts when zoomed-in but unable to position the toasts.
I've already tried altering "#toast-container" but, it places all toasts at same position of screen.
#toast-container {
top: auto !important;
right: auto !important;
bottom: 10%;
left:3%;
}
Expected:
toast 1: top-middle of screen and toast 2: top-right or bottom of screen.
There is no way to do what you are asking without adding some code (MaterializeCSS has nothing baked into the core for positioning toasts); however, you can add a class to #toast-container with some jQuery after you initialize your toast. Then you can style that class.
Option 1:
For Example:
// Initialize Toast
var duration = 3000;
Materialize.toast('Toast Message', duration, 'rounded');
// Add Class to Container
$('#toast-container').addClass('bottom-right');
// OPTIONAL : Remove Class from Container after Timeout
setTimeout(() => $('#toast-container').removeClass('bottom-right'), duration);
Then just create CSS classes to overwrite the core CSS as needed.
For Example:
#toast-container.bottom-right {
top: unset;
bottom: 10%;
}
#toast-container.bottom-left {
top: unset;
right: unset;
bottom: 10%;
left: 7%;
}
Option 2:
You can apply classes to the .toast element and give it position: fixed to place it anywhere you want.
With all that said, the animations are going to be problematic, so you might have to wrestle with those a bit... or just turn animation off completely by setting .toast to transition: none !important
Source: https://github.com/Dogfalo/materialize/pull/658
Given the div:
...
<div id='section-to-print'>CONT
/*Content*/
</div>
...
And the CSS
#media print {
* {
-webkit-transition: none !important;
transition: none !important;
}
body * {
visibility: hidden;
}
#section-to-print {
position: fixed;
top: 0;
left: 0;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
}
Whenever I print (e.g. ctrl+ p)it shows only whatever is in the /content/ region (as expected). However the content is duplicated. If I emulate the print media in chrome it shows correctly. Also, I noticed if I remove/change the position: fixed; in the CSS makes it work "properly" (not duplicating), but at the wrong position.
I couldn't find any similar problems on google and honestly I never ever saw this behavior before.
Does anybody know why is it duplicating the content when I try to print?
Also, I tried on more than 1 computer, same behavior on all.
I found a solution having the same problem. Please, try to use position static instead of fixed! Wierd right?
A few more information about the problem:
http://css-101.org/fixed-positioning/index.php
At the moment, my usual approach to supporting right-to-left (RTL) languages in a template is to simply add a .rtl class to the body tag, then go through all my existing left-to-right CSS and add left/right overrides as appropriate.
For example, my site menu might be positioned like so by default as below:
.site-nav {
position: absolute;
left: 0;
top: 0;
}
...and then manually overridden for RTL languages this way (using some template logic at a CMS level to add the .rtl class to body):
.rtl .site-nav {
left: auto;
right: 0;
}
My issue is that this seems labour-intensive and not very effecient. I was wondering what solutions others might have come up with to make this simpler.
As an aside, I'm using a Compass environment to generate my CSS. But I don't know how to escape back from the current nesting to write a .rtl modifier adjacent to the current element's default styles. This in theory would be extremely useful, however, but I simply don't know if it's possible to perform a lookup all the way back to the body element or not whilst within a deeply-nested Sass rule.
Add your .rtl-class whereever you want to change the textflow. Even when you don't want to change it (for "normal" languages).
Don't use the class in your default css-file.
Add a css-file which only includes
.rtl {
left: auto;
right: 0;
}
whenever you have a rtl-language. In case you want all your divs to behave that you you could replace .rtl with div as well.
I am using a CDN css file which sets a "top" property for an item which was recently added as a new release. This 'top' property completely throws off the height of a list item in my code. I am certain this is the culprit by use of Firebug.
Normally, I am able to override previously directed CSS properties (such as height, color, etc) but is there a way to essentially say "forget that I told you to set top: 24px, I want you to ignore that".
In essence:
.some-class > a:after {
....
top: 24px;
}
(in another file)
.some-class > a:after {
top: gothehellaway
}
Note: I have tried setting to 0, auto, and inherit without successful results.
Update 1:
I have tried using the recommended inherit but it does not work in any tested browser. I have also used top: auto !important and top: inherit !important without luck.
Update 2:
Just noticed in the CDN CSS file, there are actually two calls for the exact same property (although no idea why Zurb did it this way. Damn you Foundation 4):
.top-bar-section .has-dropdown > a:after {
...
top: 50%;
}
.top-bar-section .has-dropdown > a:after {
...
top: 22.5px;
}
The initial keyword represents the browser’s default value for a property.
.some-class > a:after {
top: initial;
}
initial has long been supported in Firefox, Chrome, and Safari, but is not supported in Internet Explorer.
Use initial to set it
for example
.some-class > a:after { top:initial; }
HTH
Short question is: is the following (an id under another id) not recommended for bloating up the CSS file size?
#product-box #product-photo { width: 200px }
details:
Sometimes in SASS, we might have
#product-box
margin-top: 20px
#product-photo
width: 200px
this way, it means it is "nested" -- that is, #product-photo's style of width 200px is only true within #product-box, and the CSS generated from the SASS is
#product-box { margin-top: 20px }
#product-box #product-photo { width: 200px }
but here we have a redundant #product-box before #product-photo, because #product-photo by itself can uniquely identify the element already.
As a result, the CSS file can become bloated. I wonder if it is recommended to un-indent #product-photo in the SASS file, so that it doesn't need to be nested?
I think we could have a .photo class inside #product-box instead... is it true? But in some cases, we might have 2 photos, or 2 li inside a #product-box, and so using a class cannot uniquely identify an element. If we use jQuery, it is true we can say $('#product-box li:eq(2) to get to any element, but it may introduce bug if somebody add another li without knowing the jQuery code depends on it. Having an id will prevent such bug from happening.
if you're selecting an element by its id, you don't need to have a nested selector - the id has to be uique everytime. if you have a class that has a different style depending on it's parent, you have to use such a nestes selector (but, if a class has the same style in every case, you can drop the parent-selector, too).
example:
#product-box #product-photo { width: 200px }
is the same as
#product-photo { width: 200px }
you could also use a class for that:
.photo { width: 200px }
but: if a photo has a different size in some cases, you have to do something like this:
#product-box .photo { width: 200px }
#another-box .photo { width: 150px }
or, alternatively, define a "default" and a special case:
.photo { width: 200px } // the default
#another-box .photo { width: 150px } // special size for photos inside #another-box
note: i have no idea how to do this in sass (i have no idea what sass is), but i hope this is helping you anyway.
note2: you shouldn't worry about this small effect on the css file-size until you have realy, realy, realy much traffic on your site - it's much more important that everything is readable and easy to understand, otherwise you will get in hell if you have to change something in the future (also, if you wan't to decrease you filesize as much as possible, why do you use such long ids? for breaking that down, wouldn't it be the best to use #a #b #c #d... and so on?)