How do I change the style of the accordion headers in ngx-bootstrap?
I tried everything. I copy pasted the code from the documentation for customizing the headers but it does not work. The tag generates a bunch of other tags with classes (mostly bootstrap classes). I get the css path to the heading from the Chrome's Inspector, but I can't change it.
The heading/link is in a <button> tag and even when I say button { color: red !important; } it does not work.
I tried everything, but it does not work.
Thanks in advance!
accordion-group {
::ng-deep {
div {
&>div.panel-heading.card-header.panel-enabled {
background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading
.btn-link {
color: rgb(6, 10, 9); // change the accordion heading buttons style
}
}
&>div.panel-collapse.collapse.in.show>div {
background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
}
}
}
}
::ng-deep{} - that's how you can change the styles of the component that comes from imported library.
The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:
ng config schematics.#schematics/angular:component.style scss
You can provide some custom CSS class to the accordion using the panelClass property.
Example
<accordion>
<accordion-group heading="Static Header, initially expanded"
[panelClass]="customClass"
[isOpen]="isFirstOpen">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Content 1">
<p>accordion 1</p>
</accordion-group>
<accordion-group heading="Content 2" panelClass="customClass">
<p>accordion 2</p>
</accordion-group>
</accordion>
Then you need to set the css rules in the global style sheet in you project.
style.css
.card.customClass, .card.customClass .card-header, .panel.customClass {
background-color: #5bc0de;
color: #fff;
}
For more information visit the ngx-bootstrap documentation (Accordion Styling).
Just dealt with this issue after upgrading to most recent versions of angular, bootstrap, etc. and I want to provide a more detailed answer.
My experience is that there's really two main ways to do it
using the [panelClass] attribute and then supplanting the existing styling in the accordion component and its children.
This way is more finicky and will likely take a lot more trial and error to configure to your desired specs.
html:
<accordion>
<accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
<accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>
note the extra set of quotation marks in the [panelClass] - Angular looks for presets otherwise. You can get around this by initializing a string variable that contains the name of the custom class you desire and popping that in there, instead.
possible css (might not be precise):
accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}
Track down the specific classes the components utilize (your web browser's developer tools are useful) and use the usual css specs (::ng-deep, !important, '>', etc.), as necessary. In the accordion-group, for example, the headings for accordion-groups utilize .btn, .btn-link, etc.
E.g., if you wanted to change the default underlines in an accordion-group's heading to only display on the (hover) event:
html:
<accordion>
<accordion-group heading="test" id="blah"></accordion-group>
<accordion-group heading="test2"></accordion-group>
</accordion>
css:
#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}
I find method #2 to be simpler, it just requires a little investigation into the components you use (probably not a bad thing anyway).
Related
I want change text color etc of help_text in fields models.
I see in html that there is helptext class:
<span class="helptext">Sentenses</span>
so I try in my css file:
.helptext {
color: #bd512f;
}
and it dont do changes.
Is there collision with bootstrap?
In CSS, the style that is specified last is applied. Perhaps the styles of your frameworks are loaded later than the one you specified. Also, inline styles like your <span> have even more precedence.
I found the answer by code:
.helptext {
color: #bd512f !Important;
}
I was following a drag and drop example in (you can find it here: https://stackblitz.com/edit/draggable-part-6)
After implementing the code I tried to move the "box" into a component.
<div class="box" appDroppable >
MyBox
<div class="box box-helper" *appDraggableHelper>MyBox</div>
</div>
And I noticed it doesn't render correctly. Looking at the chrome dev console I notices that when the element renders outside the box it has the following rule:
When inside the component, it renders the following way:
summary, the "_ngcontent-c0" attribute in not in the html and consequently the rule doesn't apply anymore.
the scss is defined the following way and does not contain any _ngcontent-c0
.box {
background: #BADA55;
border: 1px solid black;
padding: 10px 20px;
display: inline-block;
&.dragging {
background: coral;
}
}
the question is, why is the _ngcontent-c0 being added to the rule dynamically?
That's because Angular hides these classes and limits them to just the component these classes are written for. It's called ViewEcapsulation in Angular.
From Angular's Documentation:
An encapsulation policy for the template and CSS styles. One of:
ViewEncapsulation.Native: Use shadow roots. This works only if
natively available on the platform.
ViewEncapsulation.Emulated: Use
shimmed CSS that emulates the native behavior.
ViewEncapsulation.None: Use global CSS without any encapsulation.
By default, a class that you've defined in the .css file for a component will only be available for use in that component. If you want to use it in some other component, it won't be available. Angular automatically adds these texts to the classes so that they are not accessible outside the component.
thoughtram.io has an amazingly enlightening article on this which you can read here to understand this better.
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.
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.