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;
}
Related
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 Slick JS plugin. By default there is a class "slick-slide" that is added on all the slides. I notice that the slides that are in currently visible have a another class added called "slick-active".
Lets say I want to display 3 slides (slidesToShow: 3). So at all times all the slides in view will have 2 classes namely "slick-slide" and "slick-active".
I am trying to target the last slide which has the class "slick-active" using CSS. I tried all possible combinations of selectors, but no luck so far.
First I am giving a right margin to all the elements with "slick-active" class. Then I would like to target just using css the last element with "slick active" class, and give margin right of 0.
.slick-active {
margin-right: 15px;
background: blueviolet;
}
.slick-slide.slick-active:last-of-type {
margin-right: 0;
background: orangered;
}
I even tried using nth-last-of-type(1) and nth-last-child() selectors. Can someone please suggest me the correct CSS selector to target the last slide with a class of slick-active. I dont want to target the slides using javascript or jquery. Just a pure CSS solution will be appreciated. Thank you
You can try to provide a separate id to the slide if it is not being created dynamically. And then apply your required CSS.
We have to target last child specifically.
.slick-active:nth-child(3) {
color: red;
}
You can use
.slick-active:nth-child(3n){}
See this fiddle
You can use the + selector:
.slick-active + .slick-active + .slick-active {
//your property
}
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
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;}
I´m using Twitter Bootstrap as a framework for my project.
I also have a div#widget with name and email form fields and a submit button
i want to reset to defaults all the css only for that div and use my custom classes.
i tried with:
div#widget * {
background-color: #FFF;
font-size: 12px;
...
}
the problem with that code is that i need to specify every css property
I´m looking for a magical solution like
div#widget * {
// reset to factory defaults here
}
You can work it the other way round.
With :not() selector.
div:not(#widget) element {
/*Rules here will apply to each element wich are not inside div#widget */
}
I'm afraid The only way to do it is to study an element defaults and to painfully reset the needed styles.