So far I have tried to change the cell padding to 0, but ng-grid wants it to be 5 pixels. I originally made a css class called test with the following definition
test {
padding:0;
}
then i figured out that ng-grid is overriding it with the class called ngCellText so the only way to overwrite inline css is to add important
test{
padding:0 !important;
}
and this didn't work either. By the way my jade (no bracket html)(it also has a little bootstrap) looks like this
div.test
div.row-fluid.span12
div(my ng-grid document)
so then, since that didn't work, I looked at cellTemplate. Here is the default html for it
<div class="ngCellText ng-scope col0 colt0 (**input test class here**)"
ng-class="col.colIndex()">
<span ng-cell-text="" class="ng-binding">***0***</span>
</div>
This is great and it gets rid of the padding, but as you can see "0" is hardcoded since this if from an inspected element using chrome. How would I be able to do this using my ng-grid field? Also, if you have any other ideas on how to fix this please feel free on pitching in. Preferably I would like to get the !important working or anything else since the way I have ng-grid set up is so I can put it in different places of my website so custom css would be best!
This can help:
div.ngCellText[class*="col"] {
padding: 0;
}
But seems you can just override it like this:
.ngCellText {padding: 0;}
Related
Im trying to have some backend code generate some styling for me, and it prints the css class and style just fine.
following style is printed at the top of the page.
.655c6933-5ae9-4089-a576-df528bf6c823 {
background-color:#f2f2f2;
}
and as you can see in the image below the class on the html is identical, but the style issent applied, and when I add a custom style in chrome the css selector is article.\36 55c6933-5ae9-4089-a576-df528bf6c823.
this is quid confusing and I can't figure out where this /36 space is comming from ?
here you can see and test the problem as well:
https://jsfiddle.net/569r1p7x/
See this answer in regards to classes that start with numbers.
To get around this, the following works for me;
<style>
.\36 55c6933-5ae9-4089-a576-df528bf6c823 {
background-color: #f2f2f2;
}
</style>
And...
<article class="655c6933-5ae9-4089-a576-df528bf6c823">Hello World</article>
The \36 represents the number 6 which is the first character in your CSS class. The number 6 is removed from the CSS declaration in replacement for the escaped version.
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I am using bootstrap-vue and would like to add some padding to my sidebar, but i cant get it to work.
If I add padding in the browser devtools, it does.
But my code wont go through to the browser, so it does not show there at all.
I have tried to give it a class myself -> ends up in at the main tag with class: "b-sidebar-outer"
->Doesnt help, because i need it to go to the one with "b-sidebar"
But if i do this (or as specific as possible with classes):
.b-sidebar {
padding: 10px;
}
-> not showing
I could give the padding to the elements inside my sidebar, but that would be a lot more work. :c
Can anyone help?
Vue.JS gives every component and unique uid. In your DevTools you will see that components are having a data attribute, when your CSS is parsed it will look something like this div[data-v-f3f3eg9].
This way multiple components can use the same class names without intervening with eachother.
To set a style in another component you can use a deep selector
For SCSS:
/deep/ .b-sidebar {
padding: 10px;
}
For CSS:
.your-class >>> .b-sidebar {
padding: 10px;
}
Let's say I want to include my content to somebody elses site. Is there a way to make my style unique and cannot be overriden by his css files.
I have my content in a div with specific ID. If I write my css like this
#divId a {
color:red;
}
The link color can still be overriden by his style. I hope the question is understandable...
#divId a {
color:red !important;
}
This will give your style precedence, but if he later uses !important in his own style for the same element it will follow normal cascading rules and override yours.
The Best would be if you would create different classes for action like this to not having trouble leater for example if you want some elements always red creade class like this :
.always-red {
color : red !important;
}
And create different files for this called helpers or something else. so now if you would like some different elements always red you can use it simply like this :
<div class="col-md-12 always-red">
// Some html in here which text color will be always red
</div>
I'm trying to turn a brand new template into my login script and for some reason the text "ON" for the checkbox isn't aligned properly like the template is as well as there doesn't seem to be a right border when on is selected. I've been trying to match up the elements and css to troubleshoot but not having any luck.
http://www.kansasoutlawwrestling.com/kowmanager/login
http://themeforest.net/item/zice-admin-colorful-admin-templates/full_screen_preview/1980638
I tried changing the padding as suggested by the two people below but I'd rather not change the css because it works on the template shouldn't it work without changing the css on mine.
Any other ideas?
I'm hoping someone sees something.
There's a 13px padding set on the span. Remove it and it will align properly.
It's on line 1187 of your zice.style.css file:
label.iPhoneCheckLabelOn span {
padding-left:13px
}
Change this declaration to this value:
label.iPhoneCheckLabelOn span {
padding-left: 1px;
}