So I am making a menu with a dropdown and there is something very weird happening with foundation. The link is coming with a padding-right of 21rem !important and I am pretty sure it is coming from foundation. I don't have 21rem or any importants in my menu css. Here's the exact line of code that it is generating. I have a file that compiles all the css so it is hard to pinpoint exactly the cause.
.top-bar-section .has-dropdown > a {
padding-right: 21rem !important; }
Any ideas?
target .profile-menu in your css and override it with padding-right: 0 !important if that doesn't work add an id to that a tag and target that id
I think, there is a problem with implicit units.
Edit your bower_components/foundation/scss/foundation/components/_top-bar.scss file from
padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
to
padding-#{$opposite-direction}: $topbar-link-padding + rem-calc(20) !important;
In Foundation commit 94312727c2dc18016bef51527e9913975612822b this is in line 517.
Related
I'm building a website using the following template as a base: https://github.com/issaafalkattan/React-Landing-Page-Template
I'm running into a problem when removing the margin in several of the sections. For example (as seen using Chrome's developer-tools), I'd like to remove the 'orange' areas of the Gallery section:
During my troubleshooting, I added
* {
margin:0 !important;
padding:0 !important;
}
to both style.css and bootstrap.css to 'force' the margins to go away so I could find the true culprit later, but that only shifted the left margin to the right:
Because of this, I'm assuming React is overriding my CSS; is there a way I can 'ignore' React setting the margins for certain components? I'm new to React so apologies if this is a silly question, but I can't seem to find a fix for my specific problem.
Thank you!
Adding width: 100vw; to the container, as Nick Vu suggested, fixed my issue.
I am working in enhanced grid Dojo 1.10 version. My problem is very simple but still, I am not able to resolve it. I need to apply background-color css property
to a table row. But the problem there is an already background property applied to that row which has background-color also. If I remove that property from console my background-color is reflecting properly.
I have tried to override it, change it but none of them is working. Actually the class which is applied is not directly straight forward. Something like this
.claro .dojoxGridRowTable tr {
background-image : url("...")
background-repeat : repeat-x;
background-attachment :scroll;
background-clip:border-box;
background-origin:padding-box;
background-size:auto auto;
}
How can I override this class. Can anyone please help me here.
The root of the problem is Specificity. You can read more about it here.
Basically, the more selectors you use in your CSS, the higher it will rank in specificity. For example,
.text-title {}
is not very specific.
.label-text .text-title {}
is more specific and will take precedence.
.label .label-text .text-title {}
is even more specific. And:
div.label > .label-text > .text-title {}
is yet even more specific and will take precedence over all the others.
So the solution to the problem is that your CSS needs to get more specific than the Dojo CSS. Just use more specific ones in your custom CSS.
Unfortunately, you may see properties with !important in a number of situations, so you will be forced to use it as well to over ride theirs.
use !important on CSS properties:
.claro .dojoxGridRowTable tr {
background-image : url("...") !important;
background-repeat : repeat-x !important;
background-attachment :scroll !important;
background-clip:border-box !important;
background-origin:padding-box !important;
background-size:auto auto !important;
}
Using jQuery UI for my project and I can't seem to find the CSS to remove the 10 px or so white space between the actual tabs and the tab content.
Any help is appreciated.
try this in your css file/definition
.ui-tabs .ui-tabs-nav li {
margin: 1px 0 0 0 !important;
}
You're going to want to target .ui-tabs .ui-tabs-panel and remove the top padding; here's the default styling for this selector:
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
Here's a fiddle demonstrating a basic tabs widget with an example black box like the one in your picture.
I'd strongly advise against using !important to override any styles, especially with regard to the jQuery UI widgets, as the script generates dynamic selectors with (in some cases) a high level of specificity.
I wrote an article on Medium about how to style jQuery tabs; while not directly relevant to your existing problem, I do touch upon the specific dynamic classes for the widget. If you're looking for further help, it might aid you in some way.
Cheers!
I finally fixed it, many wasted hours digging through CSS just to figure out that it was a freakin' <p></p> tag set in this line:
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
All other answers were fine and I didn't post enough of a code sample to give anyone else a chance at a solution. Was not sure who to award the answer to so I answered myself since this is what actually fixed the issue.
Thanks to the other folks who responded with info.
I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?
The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)
Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');
I have the element.style 'margin-left: 0;' on one of my ul classes. I would like to get rid of it but I can't change the js file without messing everything up so I'm wondering if there is a way to disable this in my CSS? Thanks in advance.
In your CSS just do
ul.something {
margin-left: auto !important; // or whatever px instead of auto
}
That will work most of the time, provided it's the last stylesheet to be loaded, otherwise it might be overridden by a different style again.